微信小程序可以加服务器上的字体,微信小程序中自定义字体

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

官网接口文档

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

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

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

加载字体

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

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;

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