小程序中使用@font-face

在小程序中的 wxss 中使用 @font-face 例如 @font-face {font-family: myfont; src: url('https://myhost.com/fonts/myfont.ttf');} 会在模拟器中报错：

VM2696:1 Failed to load font https://myhost.com/fonts/myfont.ttf
net::ERR_CACHE_MISS 

虽然在模拟器中能正常显示字体，但在真机中是不行的。

解决办法有2个：

小程序提供的API

使用小程序提供的 wx.loadFontFace， 先在js文件里加载字体，

wx.loadFontFace({
  family: 'myfont',
  source: 'url("https://myhost.com/fonts/myfont.ttf")',
  success: console.log
})

wxss 文件里不用写@font-face，直接用 font-family: myfont 即可

文档在 https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

使用base64字体 （CSS的标准方式）

也可把字体转成 WOFF/WOFF2/SVG 等格式， 并对二进制 base64 编码，嵌入到 css/wxss 文件中，不需要从网络上访问字体文件。

转化字体可以用 https://transfonter.org/ 这个网站提供的转化工具还可以只转换自己需要的几个文字，这样减少字体文件大小。

CSS文件会类似下面这个样子

@font-face {
    font-family: 'myfont';
    src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAA ... 这里会很长 ... EADQABAAA=) format('woff');
    font-weight: bold;
    font-style: normal;
}