把字体放到小程序里，结果页面加载慢得像蜗牛，用户早就跑了
咱们今天聊一个特别实在的问题：怎么把字体放到小程序里，而且不是那种网上随便一搜“把字体包扔进项目目录就行”的敷衍答案。如果你做过小程序，你一定遇到过这样的场景——设计稿上用了思源黑体、庞门正道标题体，或者某个手写感很强的字体，结果一上线，安卓手机上直接变成默认黑体，整个页面气质垮掉。这不是你的错，是小程序对字体的限制确实比H5要严格得多。但问题有解，而且解法不止一种，关键是要根据你的业务场景来选。
先讲一个本地小案例。去年我给一家做本地烘焙工坊的小程序改版，他们的品牌字体是一款叫“沐瑶软笔手写体”的免费商用字体，用在蛋糕名称和优惠标签上。一开始开发直接用了@font-face引用线上字体文件，结果在部分低端安卓机上，字体加载延迟了三四秒，用户看到的是先显示默认字体，然后突然“闪”成手写体，体验非常糟糕。更糟的是，有些用户手机内存小，字体文件根本加载不出来，直接显示空白。这就是典型的“把字体放进去”但没考虑性能的后果。
所以，把字体放到小程序里，第一个核心原则是：不要无脑全量加载。一个中文字体包动辄几兆甚至十几兆，小程序的包体积限制是2MB（主包），你不可能为了一个字体把整个包撑爆。解决方案分三种场景，你得对号入座。
场景一：只用于少量固定文字（比如Logo、品牌Slogan、几个标题）
这种情况最省事，直接把文字转成图片。不是让你用PS一张张导出，而是用小程序里的“文字转图片”方案。具体操作：在服务器端用Node.js的canvas模块，或者用Python的PIL库，把字体文件提前渲染成透明背景的PNG图片，然后在小程序里用
场景二：需要动态显示用户输入的文字（比如用户生成海报、个性化弹幕）
这时候图片方案就不行了。你需要用字体子集化技术。什么意思？就是只从完整的字体包里提取出你需要的几个字，生成一个极小的字体文件。比如用户输入“生日快乐”，你就只提取“生”“日”“快”“乐”四个字的字形数据，生成一个几KB的woff2文件。推荐用工具“font-spider”（字蛛），这是一个开源工具，用法很简单：在命令行里运行font-spider你的html文件，它会自动扫描页面上用到的文字，然后生成一个只包含这些字的子集字体。在小程序里，把这个子集字体文件放到static目录下，用@font-face引用，注意路径要写对。微信开发者工具里可能预览正常，但真机上要确认字体文件是否被打包进去了。检查方法：在开发者工具的“详情”->“本地代码”里看看有没有你的字体文件。如果体积过大，说明子集化没做干净。
场景三：整个页面或组件需要统一字体（比如资讯类小程序的正文、电商小程序的商品描述）
这是最头疼的场景，因为涉及大量汉字。如果全量加载字体包，用户流量和加载时间都扛不住。这里有两个变通方案。第一个方案是用系统字体回退。你可以在css里这样写：font-family: '你的字体', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif; 这样你的字体优先，但加载失败时自动降级为系统字体。虽然设计效果打了折扣，但至少不会出现空白。第二个方案是使用CDN加速+预加载。把字体文件放在腾讯云或阿里云的CDN上，在小程序app.js的onLaunch里，用wx.loadFontFace这个API提前加载字体。注意这个API只支持加载网络字体，而且需要在小程序管理后台配置downloadFile合法域名。具体代码：wx.loadFontFace({ family: 'MyFont', source: 'url("https://你的CDN域名/font.woff2")' })。加载成功后，页面所有使用该字体的元素就会生效。这个API的坑在于，iOS和安卓的表现不完全一致，iOS上字体加载失败的概率比安卓低，所以建议在安卓机型上多做测试。
讲完技术方案，再聊一个很多人忽略的问题：字体的版权。把字体放到小程序里，本质上是把字体文件分发给了用户，这涉及到版权授权。很多号称“免费商用”的字体，其实只允许个人使用，不允许在商业小程序里作为资源包的一部分。比如“站酷快乐体”虽然免费，但授权协议里明确写了“不得单独出售或分发字体文件”。你在小程序里通过@font-face引用，就等于把字体文件下载到了用户手机里，严格来说属于分发行为。所以建议优先选择明确授权商业用途的字体，比如“思源黑体”“思源宋体”“阿里巴巴普惠体”“OPPO Sans”“HarmonyOS Sans”。这些字体由大厂开源，授权清晰，放心用。如果你非要用手写体或艺术字体，可以联系设计师购买商业授权，或者用前面说的图片方案，因为图片不涉及字体文件分发。
另外，不同手机厂商对字体的渲染效果也有区别。小米和华为的某些机型会对字体进行“优化”，导致你加载的字体被系统字体覆盖。测试时不要只看iPhone和微信开发者工具，一定要找几台不同品牌的安卓真机，尤其是红米、荣耀这种出货量大的机型。我遇到过最离谱的情况是，某款vivo手机在微信小程序里完全忽略自定义字体，直接显示系统默认。后来发现是vivo的“字体美化”功能在作祟，用户关闭该功能后恢复正常。所以如果你的目标用户中老年人群较多，他们往往开了各种系统美化功能，这时候字体方案要预留回退。
最后说一个进阶技巧：用CSS的font-display属性控制字体加载行为。在小程序的wxss里，@font-face可以加上font-display: swap; 这样字体加载期间，浏览器先用系统字体显示文字，等自定义字体加载完成后再替换，避免文字不可见。但注意，这个属性在微信小程序的基础库版本2.16.0以上才支持，如果你的小程序还兼容旧版本基础库，就别用了。
总结一下，把字体放到小程序里，没有一招鲜的答案。你得先想清楚：这个字体用在哪儿？用户会不会频繁修改文字？你的包体积还有多少余量？目标用户的手机性能如何？这三个问题回答清楚了，方案自然就出来了。如果你现在正在被字体问题困扰，不妨按照我说的步骤走一遍：先确认版权，再根据使用场景选方案，最后用真机测试。别怕麻烦，字体这东西，往往就是专业和业余的分水岭。