uni-app 安卓端加载字体失败

文档有说明，Android端目前不支持woff2，https://doc.dcloud.net.cn/uni-app-x/css/font-family.html

在 uni-app 开发中，如果在安卓端加载字体失败，可能是由于多种原因导致的。以下是一些常见的问题和解决方案：

1. 字体文件路径问题

确保字体文件的路径正确且可以被访问。在 uni-app 中，字体文件通常放在 static 目录下，然后在 css 中通过相对路径引用。

[@font-face](/user/font-face) {
    font-family: 'CustomFont';
    src: url('/static/fonts/CustomFont.ttf') format('truetype');
}

• 注意：路径前需要加 /，表示从根目录开始。
• 检查：确保字体文件存在，且路径正确。

2. 字体文件格式问题

安卓设备支持的字体格式通常是 .ttf 或 .otf。确保字体文件的格式正确，并且文件没有损坏。

• 验证：可以尝试在其他平台（如浏览器或 iOS）上加载字体，检查是否是字体文件本身的问题。

3. 字体文件大小问题

如果字体文件过大，安卓设备可能无法正常加载。可以尝试压缩字体文件，或者使用 woff 或 woff2 格式（需要确保设备支持）。

4. 跨域问题（仅限网络字体）

如果字体文件是从远程服务器加载的，确保服务器配置了正确的跨域头（CORS），允许字体文件的加载。

Access-Control-Allow-Origin: *

5. WebView 缓存问题

安卓设备的 WebView 可能会有缓存问题，导致字体加载失败。可以尝试以下方法解决：

• 清除缓存：在应用中手动清除缓存。
• 禁用缓存：在代码中禁用 WebView 缓存。

// 在页面生命周期中禁用缓存
onLoad() {
    uni.setStorageSync('clearCache', true);
}

6. 字体加载超时问题

如果字体文件加载时间过长，可能会导致加载失败。可以尝试以下方法：

• 优化字体文件：减少字体文件大小。
• 异步加载字体：使用 JavaScript 动态加载字体。

const font = new FontFace('CustomFont', 'url(/static/fonts/CustomFont.ttf)');
font.load().then(() => {
    document.fonts.add(font);
    console.log('字体加载成功');
}).catch(err => {
    console.error('字体加载失败', err);
});

7. 安卓系统限制

某些安卓设备或系统版本可能对字体加载有特殊限制。可以尝试以下方法：

• 测试不同设备：检查是否是特定设备或系统版本的问题。
• 使用系统默认字体：作为备选方案，避免自定义字体。

8. 调试工具

使用调试工具检查字体加载问题：

• Chrome DevTools：通过远程调试安卓 WebView，检查网络请求和错误信息。
• 日志输出：在代码中添加日志，检查字体加载的状态。

示例代码

以下是一个完整的示例：

/* 在 App.vue 或页面样式中定义字体 */
[@font-face](/user/font-face) {
    font-family: 'CustomFont';
    src: url('/static/fonts/CustomFont.ttf') format('truetype');
}

body {
    font-family: 'CustomFont', sans-serif;
}