微信小程序中自定义字体

微信小程序支持自定义字体开放出来也有段时间，这边整理下使用自定义字体中，容易忽略的一些问题，和简便的全局自定义方式。如果是同时加载两种字体包，先下载下来的会被后下载下来的字体包给覆盖。
官网接口文档

因此字体包有却只能用一种

因此字体包有却只能用一种

因此字体包有却只能用一种

加载字体

加载字体分两种，一种是局部的字体，比如说是某个页面值需要引入的自定义的字体，只有这个页面才需要用到，那就直接官方提供的例子。

wx.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success: (res) => { console.log(' load font success ', res); },
  fail: (res) => { console.log(' load font fail ', res); },
})

加载全局字体，要在app.js的onLaunch方法里面，记得global需要设置为true，这些注意看下官方文档，应该是不难。

 wx.loadFontFace({
      global: true,
      family: 'HYSSEJ',
      source: 'url("https://sungd.github.io/Pacifico.ttf")',
      success: (res) => { console.log(' load font success ', res); },
      fail: (res) => { console.log(' load font fail ', res); },
    });

设置安全下载域名地址

进入小程序微信后->开发->开发设置。讲服务器的下载地址配置到后台里面，不然下载会失败。（TIPS 如果只是单纯自己做测试的话，把小程序的debug模式开起来，就可以忽略安全域名的事情）

image.png

设置全局样式

在app.wxss 里面，设置全局的命名。

page {
  --Nomal-Font-: 'HYSSEJ';
  background: white;
}

.container { 
  font-family: var(--Nomal-Font-) !important;
  overflow: hidden;
}

组件需要用的字体的地方，用如下两种方法都可以。

font-family: 'HYSSEJ'  !important;
font-family: var(--Nomal-Font-) !important;

项目中其实很多时候我们并不需要用到所有的字体，可以单独做下字体包。自定义字体包