uni.loadFontFace(options)

动态加载网络字体

Parameters

name	type	required	default	description
options	LoadFontFaceOptions	YES	-	-

LoadFontFaceOptions Values

name	type	optinal	default	description
global	boolean	NO	-	是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
family	string	YES	-	定义的字体名称
source	string	YES	-	字体资源的地址
success	(result: AsyncApiSuccessResult) => void	NO	-	接口调用成功的回调函数
fail	(error: LoadFontFaceError) => void	NO	-	接口调用失败的回调函数
complete	(res: AsyncApiResult) => void	NO	-	接口调用结束的回调函数（调用成功、失败都会执行）

AsyncApiSuccessResult Values

name	type	optinal	default	description
errMsg	string	YES	-	-

LoadFontFaceError Values

name	type	optinal	default	description
errCode	4 | 99 | 101 | 100001 | 100002 | 200001 | 300001 | 300002	YES	-	错误码 - 4: 框架内部异常 - 99: page is not ready - 101: 参数错误 - 100001: family is null - 100002: source is null - 200001: local font not found - 300001: same source task is loading - 300002: download fail
errSubject	string	YES	-	统一错误主题（模块）名称
errMsg	string	YES	-	统一错误描述信息
data	any	NO	-	错误信息中包含的数据
name	string	YES	-	-
message	string	YES	-	-

AsyncApiResult Values

name	type	optinal	default	description
errMsg	string	YES	-	-

LoadFontFaceOptions Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
global	5.0	√	√	10.0	√	x
family	5.0	√	√	10.0	√	x
source	5.0	√	√	10.0	√	x
success	5.0	√	√	10.0	√	x
fail	5.0	√	√	10.0	√	x
complete	5.0	√	√	10.0	√	x

Return value

Type	optinal
Promise<AsyncApiSuccessResult>	NO

AsyncApiSuccessResult Values

name	type	optinal	default	description
errMsg	string	YES	-	-

loadFontFace Compatibility

Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
5.0	√	√	10.0	√	x

See also

loadFontFace

Related Bug

Example

hello uni-app x

<template>
 <view>
   <page-head title="loadFontFace"></page-head>
   <view class="uni-padding-wrap">
     <text class="font-size-20">全局加载字体：</text>
     <text class="font-size-20 line-height-40" style="font-family: UniFontFamily">font-family: uni.ttf</text>
     <view style="flex-direction: row;">
       <text class="font-size-20" style="font-family: UniFontFamily;">{{
         uniIcon1
       }}</text>
       <text style="margin-left:5px;margin-right: 20px;line-height:22px;">\ue100</text>
       <text class="font-size-20" style="font-family: UniFontFamily;">{{
         uniIcon2
       }}</text>
       <text style="margin-left:5px;line-height:22px;">\ue101</text>
     </view>
     <text class="uni-common-mt font-size-20">非全局加载字体：</text>
     <text class="font-size-20 line-height-40" style="font-family: AlimamaDaoLiTiTTF">font-family: 阿里妈妈刀隶体-ttf
       (网络字体下载后生效)</text>
     <text class="font-size-20 line-height-40" style="font-family: AlimamaDaoLiTiOTF">font-family:
       阿里妈妈刀隶体-otf</text>
     <text class="item" style="font-family: AlimamaDaoLiTiWOFF">font-family: 阿里妈妈刀隶体-woff</text>
     <text class="item" style="font-family: AlimamaDaoLiTiWOFF2">font-family: 阿里妈妈刀隶体-woff2</text>
     <button class="uni-btn" @click="navigateToChild">跳转子页面测试字体生效范围</button>
   </view>
 </view>
</template>
<script>
 export default {
   data() {
     return {
       uniIcon1: '\ue100',
       uniIcon2: '\ue101',
     }
   },
   onLoad() {
     uni.loadFontFace({
       global: true,
       family: 'UniFontFamily',
       source: '/static/font/uni.ttf',
       success() {
         console.log('global loadFontFace uni.ttf success')
       },
       fail(error) {
         console.warn('global loadFontFace uni.ttf fail', error.errMsg)
       },
     })
     uni.loadFontFace({
       family: 'AlimamaDaoLiTiTTF',
       source:
         'https://native-res.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf',
       success() {
         console.log('loadFontFace Remote AlimamaDaoLiTi.ttf success')
       },
       fail(error) {
         console.warn('loadFontFace Remote AlimamaDaoLiTi.ttf fail', error.errMsg)
       },
     })
     uni.loadFontFace({
       family: 'AlimamaDaoLiTiOTF',
       source: '/static/font/AlimamaDaoLiTi.otf',
       success() {
         console.log('loadFontFace AlimamaDaoLiTi.otf success')
       },
       fail(error) {
         console.warn('loadFontFace AlimamaDaoLiTi.otf fail', error.errMsg)
       },
     })
     uni.loadFontFace({
       family: 'AlimamaDaoLiTiWOFF',
       source: '/static/font/AlimamaDaoLiTi.woff',
       success() {
         console.log('loadFontFace AlimamaDaoLiTi.woff success')
       },
       fail(error) {
         console.warn('loadFontFace AlimamaDaoLiTi.woff fail', error.errMsg)
       },
     })
     uni.loadFontFace({
       family: 'AlimamaDaoLiTiWOFF2',
       source: '/static/font/AlimamaDaoLiTi.woff2',
       success() {
         console.log('loadFontFace AlimamaDaoLiTi.woff2 success')
       },
       fail(error) {
         console.warn('loadFontFace AlimamaDaoLiTi.woff2 fail', error.errMsg)
       },
     })
   },
   methods: {
     navigateToChild() {
       uni.navigateTo({
         url: '/pages/API/load-font-face/load-font-face-child',
       })
     },
   },
 }
</script>

<style>
 .font-size-20 {
   font-size: 20px;
 }

 .line-height-40 {
   line-height: 40px;
 }
</style>

General type

GeneralCallbackResult

name	type	optinal	default	description
errMsg	string	YES	-	错误信息