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

最新推荐文章于 2024-10-11 12:16:10 发布

原创最新推荐文章于 2024-10-11 12:16:10 发布 · 860 阅读

1 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何通过CSS的`@font-face`规则和微信小程序的`wx.loadFontFace`方法来引入并使用外部字体。示例中展示了如何设置CSS规则加载在线字体，并在页面中应用，同时提供了在微信小程序中加载字体的代码段。确保使用CDN地址以保证字体的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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