小程序引入第三方字体以及解决引入字体后页面出现闪烁的情况

小程序引入第三方字体

前言

在日常开发微信小程序的过程中，引入第 三方字体基本是常态了。然而现在的字体动不动就上兆了，对于有大小限制的微信小程序而言非常不友好，由此有了以下几种解决方案。

• 本地加载Base64-------------------不太推荐

  由于字体文件较大，转码后可能更大，因此需要先行将自己需要的字符提取出来生成新的字体文件（类似https://www.fontke.com/tool/subfont/）；而后将需要使用的字体文件放在类似https://transfonter.org/的网站进行base64转义，拿到需要的Base64码之后在wxss中引入该字体，如下：

  @font-face{
  	font-family: '',//字体名称
  	src: url('data:application/font-woff;charset=utf-8;base64,**********')//base64码
  }
  

• 在wxss中加载网络字体 -------------------不太推荐

  前提：拥有可以使用且不跨域的网络字体，或者把字体上传到自己的服务器。在线字体域名需要在小程序的安全域名中配置。同样建议在可能的情况下先行提取需要的字体。（网址见1）

  @font-face{
  	font-family: '',//字体名称
  	src: url('https://abc.com/**********')//字体网络地址
  }
  

• 使用wx.loadFontFace加载网络字体--------------------------推荐

  前提参考 2
  详细配置信息参考微信官方文档https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html
  常用配置项：family（配置字体名称）、source（配置字体网络地址，注意必须 https协议的网址，http在ios不能使用）
  注：想要全局使用时需要在app.js中调用，引入多个字体调用多次即可，但会影响小程序打开速度。

  wx.loadFontFace({
    	family: 'Bitstream Vera Serif Bold',
    	source: 'url("https://abc.com/123.ttf")'
  })
  

解决引入外部字体后，页面使用部分出现闪烁

在引入外部字体后，闪烁现象异常烦人，尤其是对于倒计时这种需要动态变化的场景，特别明显。导致闪烁的原因有两种。

• 使用第二种方法引入字体或使用第三种方法局部引入，页面渲染一次，等待字体加载完毕会再刷一下，导致闪烁。
• 使用第三种方法全局引入字体，虽然字体在进入小程序加载过了，但是在使用时依旧会遇到闪烁（亲身经历）

这里只说一下我最终采用的方法：
在需要使用的页面或组件中，提前放置一个元素，里面随便写个字符，使用你所需的第三方字体样式，并且设置样式让其不在页面显示（如下）。虽然这种方法有点hack，但是亲测可以解决闪烁问题。

<view class="my-page">
	<!-- 加载字体的地方 -->
	<view class="load-font-1">load DIN</view>
	*****
	*****
	<!-- 实际使用的地方 -->
	<view class="time">距离开始还有  5月3日  10:15</view> 
</view>

.load-font-1{ //加载字体的类，不会再出现闪烁的情况
	font-family: DIN;
    position: absolute;
    z-index: -999;
}
.time{
	font-family: DIN;
}