微信小程序引入外部字体

前言

微信小程序由于打包体积限制，不支持直接引入字体文件。但是如果我们想引入自定义的字体该怎么操作了？接下来我们介绍两种引入自定义字体的方式。

wx.loadFontFace

第一种方式就是通过官方的wx.loadFontFace(Object object)这个API去加载字体，具体用法请参考官方wx.loadFontFace用法。大概使用方法如下：

wx.loadFontFace({
    
    
  family: 'Bitstream Vera Serif Bold',//这里名字可以自定义
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success: console.log
})

//然后在wxss中定义好样式，名字要跟上面的family一样，然后在wxml中引用样式即可
.font-loaded {
    
    
  font-family: "Bitstream Vera Serif Bold";
}

Base64

有人说我只有字体文件（ttf），没有对应网络地址的文件，那么我该怎么引入了？下面我们开始说第二种方式：将字体转化成Base64方式引入。注意：这种方式只适合你知道要显示哪些字。
首先打开在线字体转换网站，这个网站可以根据你上传的字体文件，并根据你要显示的字，定制出属于你自己的字体文件，这一步主要是为了减少字体文件的体积，为后面微信小程序中直接引入Base64做好准备。

首先上传字体文件，然后输入要显示的字，点击立即生成按钮，就会生成定制化的字体文件。

接下来就是打开字体转化网站，然后点击Add fonts按钮，上传你再上面生成的客制化本地的字体文件，然后等待进度条走满，如下图标注：

上面第四步完成后，等待进度走到百分之百，然后出现如下界面：

下载完成后解压文件，如下图：

最后一个stylesheet.css文件就是我们想要，可以看到的转换成Base64后的字体文件体积大幅减小，接下来我们直接将里面的内容复制到我们的wxss文件中。

然后再样式中引用：

.font-loaded {
    
    
  font-family: "SJbangshujianti";
}

最终我们看下效果图：

尾巴

特别要注意的是，第二种方式并不适合所有情况，只有你确定自己要显示什么字了使用这种方式会更方便，不需要网络地址。
好了，今天分享就到这里了，如果文章对你有帮助，欢迎给我关注，点赞，评论，谢谢！