uniapp h5 字体缓存问题如何解决

在uniapp开发的H5页面中，字体文件被浏览器缓存后无法自动更新，即使服务器上的字体文件已经更换，客户端仍然加载旧版本。尝试过修改字体文件URL添加版本号或时间戳，但效果不稳定。请问有什么可靠的解决方案能强制浏览器获取最新的字体文件？

2 回复

在uniapp H5中，可通过以下方式解决字体缓存问题：

  1. 给字体文件URL添加版本号或时间戳参数
  2. 使用CSS的font-display: swap属性
  3. 配置webpack的file-loader处理字体文件
  4. 在manifest.json中配置缓存策略

在UniApp H5中，字体缓存问题通常表现为字体加载缓慢、重复请求或样式闪烁。以下是几种常见解决方案：

1. 使用CSS font-display属性

在字体声明中添加font-display: swap，确保文本始终可见，字体加载完成后再替换：

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

2. 预加载字体资源

在HTML的<head>中添加预加载链接，加速字体加载：

<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin>

3. 利用本地存储缓存字体

通过JavaScript将字体文件存储到LocalStorage，减少重复请求：

// 检查缓存并加载字体
async function loadFont() {
  const fontUrl = '/fonts/custom.woff2';
  const cachedFont = localStorage.getItem('cachedFont');
  
  if (cachedFont) {
    // 直接使用缓存的字体
    const fontFace = new FontFace('CustomFont', `url(${fontUrl})`);
    document.fonts.add(fontFace);
  } else {
    // 下载并缓存字体
    const response = await fetch(fontUrl);
    const fontBlob = await response.blob();
    localStorage.setItem('cachedFont', URL.createObjectURL(fontBlob));
  }
}
loadFont();

4. 服务端配置缓存头

确保服务器返回正确的缓存控制头，例如：

Cache-Control: public, max-age=31536000

5. 使用Base64内联字体

将字体转换为Base64嵌入CSS，避免额外请求（适用于小字体文件）：

@font-face {
  font-family: 'CustomFont';
  src: url('data:font/woff2;base64,...') format('woff2');
}

注意事项：

  • 优先使用WOFF2格式，压缩率更高
  • 大字体文件慎用Base64，可能影响CSS加载性能
  • 预加载仅适用于关键字体，避免过度使用

选择适合方案组合使用，通常能显著改善H5字体加载体验。

回到顶部