小程序引用第三方字体（阿里巴巴普惠体）-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序引用第三方字体（阿里巴巴普惠体）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、第一种方式（推荐）

先直接上代码，后部分有解析

wxml

<view>不破楼兰终不还（默认）</view>
<view>数字：1234567890</view>
<view class="font">不破楼兰终不还（三方）</view>
<view class="font">数字：1234567890</view>

app.js

  onLoad(options) {
    wx.loadFontFace({
      family: 'Ali',
      source:
        'url("https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-75-SemiBold/AlibabaPuHuiTi-2-75-SemiBold.ttf")',
      success: console.log
    })
  },

wxss

.font {
  font-family: Ali;
}

效果图
小程序使用阿里字体,小程序,前端,javascript

这里简单的说一下 wx.loadFontFace

小程序使用阿里字体,小程序,前端,javascript

有两个必填的参数，见上图，其中第一个必填参数用于给字体起名字，第二个必填参数为字体的url地址，这里建议使用ttf

阿里巴巴普惠体

官网网址https://www.alibabafonts.com/
上面我使用的是阿里巴巴普惠体2.0
小程序使用阿里字体,小程序,前端,javascript
复制之后的内容为

<style>
@font-face {
	font-family: AlibabaPuHuiTi-2-45-Light;
	src:url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-45-Light/AlibabaPuHuiTi-2-45-Light.eot) format('embedded-opentype'),
	url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-45-Light/AlibabaPuHuiTi-2-45-Light.otf) format('opentype'),
	url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-45-Light/AlibabaPuHuiTi-2-45-Light.ttf) format('TrueType'),
	url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-45-Light/AlibabaPuHuiTi-2-45-Light.woff) format('woff'),
	url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-45-Light/AlibabaPuHuiTi-2-45-Light.woff2) format('woff2');
}
</style>

之后我们只需要拿取 ttf格式的即可，如：

https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-45-Light/AlibabaPuHuiTi-2-45-Light.ttf
把它放到 wx.loadFontFace 的 url 里

2、第二种方式（直接放入wxss）

该方式比较简洁，但加载速度略慢，上代码
wxml

<view>不破楼兰终不还（默认）</view>
<view>数字：1234567890</view>
<view class="font">不破楼兰终不还（三方）</view>
<view class="font">数字：1234567890</view>

wxss

@font-face {
  font-family: Ali;
  src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaShuHeiTi/AlimamaShuHeiTi-Bold/AlimamaShuHeiTi-Bold.ttf)
    format('TrueType');
}
.font {
  font-family: Ali;
}