my.loadfontface(object object)
基础库 或更高版本； 且 支付宝客户端 10.1.32 或更高版本； 若版本较低，建议采取 兼容处理 。
主体： 企业支付宝小程序 、 个人支付宝小程序
相关文档： native 渲染
动态加载网络字体。
注意：
- my.loadfontface 目前只支持 woff，otf，ttf，sfnt 字体。
- 字体资源地址必须是 https 协议。
- 受同源策略限制，字体资源服务器必须开启 cors 支持。支付宝小程序的域名为 ${appid}.hybrid.alipay-eco.com。
- 字体资源响应头中 content-type 请参考表格。无效的 content-type 会导致字体解析失败。
| 字体 | mime type |
|---|---|
| woff | font/woff |
| otf | font/otf |
| ttf | font/ttf |
| sfnt | font/sfnt |
object object
查看示例
| 属性 | 类型 | 默认值 | 必填 | 兼容性 | 描述 | |||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| family | string | - | 是 | - | 字体名称 |
|||||||||||||||||||||||||||||||||||||
| source | string | - | 是 | - | 字体资源地址，格式为 ""，详见示例代码。 |
|||||||||||||||||||||||||||||||||||||
| nativecanvas | boolean | true | 否 | 基础库: 2.6.2 |
加载的字体是否在 native canvas （即 axml 中指定了 type 属性的 canvas 组件）中可用 |
|||||||||||||||||||||||||||||||||||||
| desc | object | - | 否 | - | 字体描述符 |
|||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
| global | boolean | - | 否 | 基础库: 2.7.15 |
加载的字体是否对整个小程序生效。false 表示只在当前页面生效 |
|||||||||||||||||||||||||||||||||||||
| success | function | - | 否 | - | 调用成功的回调函数 |
|||||||||||||||||||||||||||||||||||||
| fail | function | - | 否 | - | 调用失败的回调函数 |
|||||||||||||||||||||||||||||||||||||
| complete | function | - | 否 | - | 调用结束的回调函数（调用成功、失败都会执行） |
success 回调函数
参数
object res
| 属性 | 类型 | 描述 |
|---|---|---|
| status | string | 状态 |
fail 回调的参数为 object，error 属性为错误码，errormessage 属性为错误消息。
| 错误码 | 错误消息 | 凯发app官方网站的解决方案 |
|---|---|---|
| 10 | error |
请检查字体链接是否为有效的 https 链接，字体链接是否开启了 cors 支持，字体格式及 content-type 是否有效。 |
my.loadfontface({
// 替换成自定义的字体和文件
family: 'my font',
source:
'',
success() {
my.alert({
title: 'loadfontface 成功',
});
},
fail: error => {
console.error('loadfontface 失败: ', json.stringify(error));
},
});
{
"status": "loaded"
}
{
"error": 10,
"errormessage": "error",
"status": "error"
}
-
tip相对其他格式字体，woff2 字体内存占用较高。支付宝小程序不支持加载 woff2 字体。