微信小程序 加载外部字体

### 如何在微信小程序中添加和使用自定义字体 #### 添加自定义字体的方法 为了使微信小程序能够支持特定的字体样式，在应用启动时通过`onLaunch()`函数调用设置字体方法是一个常见做法[^2]。具体来说，可以通过`wx.loadFontFace`接口动态加载网络上的字体资源并将其应用于整个项目或指定的选择器。 对于想要使用的每一种新字体，都需要创建相应的配置对象传递给`loadFontFace`函数。此配置应包含是否全局生效(`global`)、期望注册的名字(`family`)以及指向该字体文件的位置(`source`)三个主要属性。一旦完成这些设定，则可以在后续的小程序页面内利用CSS声明的方式引用已加载过的字体名称作为`font-family`值的一部分来改变文字外观。 下面是一段用于初始化两个不同风格字体的例子： ```javascript function setFont() { const Fredoka_url = 'https://example.com/path/to/FredokaOne-Regular.ttf'; const PingFang_url = 'https://wechat/static/font/苹方字体.ttf'; wx.loadFontFace({ global: true, family: 'Fredoka One', source: `url(${Fredoka_url}) format('truetype')`, success(res) {console.log('Fredoka One 加载成功');}, fail(err){console.error('Fredoka One 加载失败', err);} }); wx.loadFontFace({ global: true, family: 'PingFang HK', source: `url(${PingFang_url}) format('truetype')`, success(res) {console.log('PingFang HK 加载成功');}, fail(err){console.error('PingFang HK 加载失败', err);} }); } ``` 值得注意的是，由于字体文件通常体积较大，建议提前上传至可靠的CDN服务上，并确保链接稳定可靠以便于快速下载。 另外，在项目的根目录下的`app.wxss`文件里也可以直接导入外部样式表以简化某些情况下对字体样式的管理[^3]。例如： ```css @import './style/iconfont.wxss'; page{ font-size:15px; /* 使用之前定义好的字体 */ font-family:'PingFang HK','Fredoka One', sans-serif; } ``` 这样做的好处是可以集中管理和维护所有的公共样式规则，同时也方便了团队协作中的资源共享。