uni-app 项目中使用自定义字体

前言

在 uni-app 项目中使用自定义字体确实存在一些兼容性问题。分析一下各个平台的兼容性情况：

🚨 uni-app 自定义字体兼容性分析

根据 uni-app 的跨平台特性，详细说明各平台的情况：

📱 各平台兼容性对比

1. H5 平台 ✅ 兼容性最好

// H5 平台完全支持 @font-face
@font-face {
  font-family: 'PingFang SC';
  src: url('/static/fonts/PingFang-Regular.ttf') format('truetype');
  font-weight: 400;
}

2. 微信小程序 ⚠️ 有限制

// 微信小程序不支持 @font-face，但支持系统字体
.text {
  /* 只能使用系统预装字体 */
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

3. APP 平台 ⚠️ 需特殊处理

• Android: 需要将字体文件放到 static 目录，通过特定方式引用
• iOS: 需要在 manifest.json 中配置字体，并注册字体

🔧 兼容性解决方案

使用条件编译来处理不同平台的兼容性：

兼容性最好的解决方案：

💡 推荐的兼容性方案

方案1：使用系统字体（推荐）⭐

// 在 src/style/index.scss 中定义
:root, page {
  // 使用系统字体栈，兼容性最佳
  font-family: 
    /* #ifdef H5 */
    'PingFang SC', 
    /* #endif */
    /* #ifdef MP-WEIXIN */
    'PingFang SC', 
    /* #endif */
    /* #ifdef APP-PLUS */
    'PingFang SC', 
    /* #endif */
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    'Roboto', 
    'Helvetica Neue', 
    Arial, 
    sans-serif;
}

// 字体权重工具类
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

方案2：条件编译处理（如果必须使用自定义字体）

// 只在 H5 平台使用自定义字体
/* #ifdef H5 */
@font-face {
  font-family: 'PingFang SC Custom';
  src: url('/static/fonts/PingFang-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'PingFang SC Custom';
  src: url('/static/fonts/PingFang-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'PingFang SC Custom';
  src: url('/static/fonts/PingFang-Bold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
/* #endif */

// 通用字体设置
.custom-font {
  font-family: 
    /* #ifdef H5 */
    'PingFang SC Custom',
    /* #endif */
    'PingFang SC',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

🛠️ 实际应用到组件

具有更好的兼容性：

.main-stats {
  margin-bottom: 16rpx;

  .amount {
    // 兼容性最好的字体设置
    font-family: 
      'PingFang SC',
      -apple-system,
      BlinkMacSystemFont,
      'Helvetica Neue',
      Helvetica,
      Arial,
      sans-serif;
    font-weight: 600;
    font-size: 40rpx;
    color: #ff6a00;
    line-height: 50rpx;
    margin-bottom: 4rpx;
    
    // 优化字体渲染
    /* #ifdef H5 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* #endif */
  }

  .label {
    font-family: 
      'PingFang SC',
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
    font-size: 26rpx;
    color: #333;
    font-weight: 500;
    line-height: 1.2;
  }
}

📋 各平台具体问题

1. 微信小程序限制

• ❌ 不支持 @font-face
• ❌ 不能加载外部字体文件
• ✅ 支持系统预装字体
• ✅ 支持字体权重设置

2. APP 平台问题

• ⚠️ Android 需要特殊配置
• ⚠️ iOS 需要在 Info.plist 中注册
• ⚠️ 字体文件路径处理复杂
• ⚠️ 包体积会增大

3. H5 平台

• ✅ 完全支持 @font-face
• ✅ 支持多种字体格式
• ⚠️ 需要考虑加载性能
• ⚠️ 可能有跨域问题

🎯 最佳实践建议

1. 优先使用系统字体：PingFang SC 在 iOS 和 macOS 上是系统预装字体
2. 设置字体回退：确保在不支持的平台上有合适的替代字体
3. 使用条件编译：针对不同平台做特殊处理
4. 测试各平台：在所有目标平台上进行充分测试

💻 推荐的实现代码

// src/style/index.scss
:root, page {
  // 兼容性最佳的字体设置
  font-family: 
    'PingFang SC',           // iOS/macOS 系统字体
    'Microsoft YaHei',       // Windows 中文字体
    'Hiragino Sans GB',      // macOS 中文字体
    -apple-system,           // iOS 系统字体
    BlinkMacSystemFont,      // macOS 系统字体
    'Segoe UI',             // Windows 系统字体
    Roboto,                 // Android 系统字体
    'Helvetica Neue',
    Arial,
    sans-serif;
    
  // 字体渲染优化
  /* #ifdef H5 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* #endif */
}

// 字体权重工具类
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

这样设置既能保证在支持 PingFang SC 的平台上显示期望的字体效果，又能在不支持的平台上有合适的降级处理，兼容性最佳！