小程序开发API之动态加载网络字体wx.loadFontFace

最新推荐文章于 2025-03-23 13:50:51 发布

M.Siebel

最新推荐文章于 2025-03-23 13:50:51 发布

阅读量1.1w

点赞数 1

分类专栏： ONE PIECE--小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/JackJia2015/article/details/86595093

版权

本文介绍了小程序中如何使用wx.loadFontFace动态加载网络字体，强调了iOS平台只支持HTTPS格式的字体链接，并提醒开发者注意字体文件大小和 CORS 支持问题。同时指出，canvas等原生组件不支持使用该接口添加的字体，对于报错情况给出了相应提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wx.loadFontFace(Object object)

动态加载网络字体。文件地址需为下载类型。iOS 仅支持 https 格式文件地址。

注意：

引入中文字体，体积过大时会发生错误，建议抽离出部分中文，减少体积，或者用图片替代
字体链接必须是https（ios不支持http)
字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com
canvas等原生组件不支持使用接口添加的字体
工具里提示 Faild to load font可以忽略

wx.loadFontFace参数

在这里插入图片描述

object.desc 的结构

在这里插入图片描述

示例：

wx.loadFontFace({
      family: 'Bitstream Vera Serif Bold',
      source: 'url("https://sungd.github.io/Pacifico.ttf")',
      desc:{
        style:'normal',        
        weight: 'bold',
        variant: 'small - caps'
      },
      success: console.log
    })