codecamp

支付宝小程序API 字体

my.loadFontFace

简介

my.loadFontFace 是动态加载网络字体的 API。

使用限制

  • 文件地址需为下载类型。
  • iOS 仅支持 HTTPS 格式文件地址。
  • 支付宝小程序目前只支持 woff,otf,ttf,sfnt 字体。
  • 基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理
  • 支付宝小程序不支持 woff2 字体,原因是:
    • 相对其他格式字体,对内存占用较高。
    • 此字体支持对于内核 so size 有较大负担,目前支付宝使用的 u4 内核 3.0 将 woff2 格式支持给裁剪了,导致无法正常显示, 建议使用其他格式。

示例代码

<!-- .axml -->
<view class="page">
  <view class="page-description">动态加载网络字体</view>
  <view class="page-section">
    <view class="page-section-title">loadFontFace</view>
    <view class="page-section-demo">
      <button size="default" type="primary" onTap="loadFontFace">
        loadFontFace
      </button>
    </view>
  </view>
</view>
// .js
Page({
  data: {},
  onLoad() { },
  loadFontFace() {
    my.loadFontFace({
      family: 'Bitstream Vera Serif Bold',
      source: 'url("https://sungd.github.io/Pacifico.ttf")',
      success() {
        my.alert({
          title: 'loadfontface 成功!!!',
        })
      },
      fail: (err) => {
        my.alert({
          content: JSON.stringify(err),
        })
      },
    })
  },
})

入参

入参为 Object 类型,属性如下:

属性 类型 必填 描述
family String 字体名称。
source String 字体资源地址。
desc Object 字体描述符。
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

desc 结构

属性 类型 必填 描述
style String 字体样式,默认值为 normal,可选值为 normal / italic / oblique。
weight String 字体粗细,默认值为 normal,可选值为 normal / bold / 100 / 200../ 900。
variant String 设置小型大写字母的字体显示文本,默认值为 normal,可选值为 normal / small-caps / inherit。
支付宝小程序API 设置 optionMenu
支付宝小程序API 图片
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }