小程序加载外部字体
发布于 4 年前 作者 lei35 2753 次浏览 来自 分享

有两种方法,步骤1、2、4是相同的。

1.将下载下来的字体文件上传到文件服务器上,拿到url

2.将url的域名在小程序公众平台配置downloadFile合法域名


第一种方法:

3.在app.js中加载字体

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

第二种方法:

3.在app.css中加载字体文件

[@font-face](/user/font-face) {
    font-family: 'Bitstream Vera Serif Bold';
    src: url('https://sungd.github.io/Pacifico.ttf');
}

——————————————————————————

4.如需全局配置,在app.css中配置全局样式,font-family填字体的英文名称。不用全局的话,page里的font-family可不配置,在页面需要显示的字体上用font-family设置

page {
    font-family: "Bitstream Vera Serif Bold";
    background-color: #34C758;
    color: #fff;

}


回到顶部