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 的平台上显示期望的字体效果，又能在不支持的平台上有合适的降级处理，兼容性最佳！