如何在微信小程序内使用外部字体

通过 font-face 使用外部字体

首先通过 css 引入地址，然后在需要使用该字体时使用定义的 font-family 即可。

 

@font-face {
  font-family: "kaiti";
  src: url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf");
}
.test {
  font-family: "kaiti";
}

这里的 url 要用 CDN 地址，本地地址无效。

通过 wx.loadFontFace 使用外部字体

这里需要在 app.js 中将需要使用的字体引入，然后通过 font-family 使用改字体。

 

wx.loadFontFace({
  family: "Bitstream",
  source:
    'url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf")',
  success: (msg) => {
    console.log(msg);
  },
});

 

.test {
  font-family: "Bitstream";
}

 

更多内容 请看前端面试题库