微信小程序中如何使用自定义字体

发布时间：2022-02-21 14:42:41 作者：iii
来源：亿速云阅读：290

# 微信小程序中如何使用自定义字体

## 前言

在微信小程序开发中，默认支持的字体有限（如`PingFang SC`、`Helvetica Neue`等），当设计师要求使用特定品牌字体或特殊艺术字体时，就需要引入自定义字体。本文将详细介绍在微信小程序中使用自定义字体的完整方案，包括技术实现、注意事项和常见问题解决。

---

## 一、小程序字体使用限制

微信小程序环境与传统Web开发不同，存在以下限制：

1. **不支持`@font-face`**：无法直接通过CSS引入网络字体
2. **字体文件必须本地化**：所有资源需下载到本地才能使用
3. **体积限制**：单个小程序包不能超过2MB（分包可达8MB）

---

## 二、实现方案对比

### 方案1：Base64内联字体（不推荐）
```css
/* 在小程序中无效！ */
@font-face {
  font-family: 'MyFont';
  src: url('data:font/ttf;base64,AAEAAA...') format('truetype');
}

缺点：小程序CSS不支持该语法，且会导致CSS文件过大

方案2：网络字体动态加载（推荐）

通过wx.loadFontFaceAPI动态加载字体文件

方案3：静态字体文件（适合小体积字体）

将字体文件放入项目目录直接引用

三、具体实现步骤

方法1：使用wx.loadFontFace（动态加载）

// app.js或页面JS中
wx.loadFontFace({
  family: 'AlibabaPuHuiTi-Bold',
  source: 'url("https://example.com/fonts/Alibaba-PuHuiTi-Bold.ttf")',
  success(res) {
    console.log('字体加载成功', res)
  },
  fail(err) {
    console.error('字体加载失败', err)
  }
})

参数说明： - family：自定义的字体名称 - source：字体文件远程地址（需HTTPS） - desc：可选，设置字体样式（weight/style）

方法2：使用本地字体文件

将字体文件（如.ttf）放入项目目录（建议/assets/fonts/）
在app.wxss中全局定义：

/* app.wxss */
@font-face {
  font-family: 'MyLocalFont';
  src: url('/assets/fonts/myfont.ttf') format('truetype');
}

在页面中使用：

.title {
  font-family: 'MyLocalFont', sans-serif;
}

四、优化技巧

1. 字体格式选择

TTF：兼容性好，但体积较大
WOFF/WOFF2：现代格式，体积更小（需确认小程序支持性）

2. 字体子集化

使用工具提取所需字符（推荐工具）： - Font-spider - Glyphhanger

3. 加载性能优化

// 提前在app.js加载
App({
  onLaunch() {
    this.loadFonts()
  },
  loadFonts() {
    wx.loadFontFace({
      family: 'CustomFont',
      source: 'url(https://xxx.woff2)',
      scopes: ['webview', 'native'] // 1.7.0+支持
    })
  }
})

五、常见问题解决

Q1：字体不生效的可能原因

字体文件路径错误
字体名称拼写不一致
未等待加载完成就使用
安卓/iOS兼容性问题

Q2：如何监听字体加载状态？

Page({
  data: { fontLoaded: false },
  onLoad() {
    wx.loadFontFace({
      family: 'MyFont',
      source: 'url(https://xxx.woff2)',
      success: () => {
        this.setData({ fontLoaded: true })
      }
    })
  }
})

Q3：多平台显示不一致？

解决方案：在CSS中设置fallback字体

.text {
  font-family: 'CustomFont', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

六、注意事项

版权问题：确保拥有字体商用授权
体积控制：中文字体建议子集化处理
加载时机：关键字体建议在首屏前加载
测试覆盖：需在iOS/Android真机测试

七、完整代码示例

动态加载方案

// page.js
Page({
  onLoad() {
    wx.showLoading({ title: '加载字体中...' })
    
    wx.loadFontFace({
      family: 'DINAlternate-Bold',
      source: 'url(https://fonts.example.com/DIN-Alternate-Bold.ttf)',
      success: () => {
        wx.hideLoading()
        this.setData({ showText: true })
      },
      fail: (err) => {
        console.error(err)
        wx.showToast({ icon: 'none', title: '字体加载失败' })
      }
    })
  }
})

<!-- page.wxml -->
<view wx:if="{{showText}}" style="font-family: 'DINAlternate-Bold';">
  这是自定义字体效果
</view>

结语

通过wx.loadFontFaceAPI或本地字体文件引入，开发者可以在小程序中实现丰富的字体效果。建议根据实际场景选择合适方案，并始终关注性能优化和版权合规问题。随着小程序能力的持续开放，未来可能会有更便捷的字体使用方案出现。

最后更新：2023年11月 | 微信文档版本：2.16.0 “`

（注：实际字数约1500字，可根据需要增减示例代码或优化细节部分的篇幅来精确控制字数）