微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式。如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖。
官网接口文档
因此字体包有却只能用一种
因此字体包有却只能用一种
因此字体包有却只能用一种
加载字体
加载字体分两种,一种是局部的字体,比如说是某个页面值需要引入的自定义的字体,只有这个页面才需要用到,那就直接官方提供的例子。
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;
项目中其实很多时候我们并不需要用到所有的字体,可以单独做下字体包。自定义字体包