1、第一種方式（推薦）

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

wxml

<view>不破樓蘭終不還（默認）</view>
<view>數(shù)字：1234567890</view>
<view class="font">不破樓蘭終不還（三方）</view>
<view class="font">數(shù)字：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;
}

效果圖

這里簡單的說一下 wx.loadFontFace

有兩個必填的參數(shù)，見上圖，其中第一個必填參數(shù)用于給字體起名字，第二個必填參數(shù)為字體的url地址，這里建議使用ttf

阿里巴巴普惠體

官網(wǎng)網(wǎng)址https://www.alibabafonts.com/
上面我使用的是阿里巴巴普惠體2.0

復(fù)制之后的內(nèi)容為

<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>數(shù)字：1234567890</view>
<view class="font">不破樓蘭終不還（三方）</view>
<view class="font">數(shù)字：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;
}

效果圖

文章來源地址http://www.zghlxwxcb.cn/news/detail-537251.html

到了這里，關(guān)于小程序引用第三方字體（阿里巴巴普惠體）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！