微信小程序引用外部字体

Basil_Bai
2,267 阅读1分钟

Example.png

主要有两种方式：内部引用和外包引用。

根据具体情况决定使用，因为小程序包有2M的限制，如果字体过大就外包引用。

内部引入

  1. 先将字体包转换成需要的格式ttf、eot、svg、woff（最好是ttf文件）字体转换
  2. 将字体文件转换成base64 转换地址

transfonter.png

  1. 将下载得到的stylesheet.css文件拷贝到小程序工程根目录并重新命名，例如din-font.wxss

stylesheet.png

din-font.png

  1. 在小程序app.wxss里面引用字体库的wxss文件
@import "./din-font.wxss";
  1. 在需要用到的地方使用font-family: 'DIN';大功告成！

外部引用

这种方式比较简单，推荐使用。

在app.wxss引用

@font-face {
  font-family: 'Din';
  src: url('https://domain.com/DIN.ttf') format('truetype');
}

注意事项

  • iOS必需使用htpps且不能使用代理地址

  • 域名需要配置白名单

  • 如果放在阿里云oss上面，需要设置允许跨域

avatar
文章
阅读
粉丝