美文网首页
如何在微信小程序内使用外部字体

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

作者: 胡小喵_ | 来源:发表于2020-11-26 23:55 被阅读0次

通过 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";
}

相关文章

网友评论

      本文标题:如何在微信小程序内使用外部字体

      本文链接:https://www.haomeiwen.com/subject/okstwktx.html