Safari首次无缓存时字体下载失败，刷新后恢复正常的问题求助

问题描述 #

• Safari浏览器在首次无缓存加载页面时，无法下载服务器端存储的字体，刷新页面后字体加载恢复正常
• 直接访问字体文件URL可正常下载，调整@font-face规则、更换字体文件、切换服务器均未解决问题
• 当前使用的@font-face规则示例：

@font-face {
  font-family: Museo Sans Cyrl;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: 
  url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.ttf") format("truetype"),
  url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.woff2") format("woff2"),
  url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.otf") format("opentype");
}

其他字重的字体规则与此结构一致。

解决方案思路 #

1. 调整字体格式加载顺序与语法规范
   Safari对字体格式的优先级处理存在特性差异，建议将现代浏览器最优的woff2格式放在加载顺序最前端，同时给带空格的字体名添加引号，避免解析异常：

@font-face {
  font-family: 'Museo Sans Cyrl';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: 
    url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.woff2") format("woff2"),
    url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.otf") format("opentype"),
    url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.ttf") format("truetype");
}

2. 检查服务器缓存与CORS配置

• 确认字体文件的Cache-Control响应头配置合理，避免首次加载时缓存策略冲突导致资源加载异常
• 验证CORS配置：Safari加载字体时（即使同域名资源，部分场景也会触发跨域校验），需服务器返回Access-Control-Allow-Origin响应头，可配置为：

  Access-Control-Allow-Origin: *
  

  或根据实际业务设置具体允许的域名。

3. 添加字体预加载规则
   在HTML的<head>标签中添加预加载指令，强制浏览器在页面渲染前优先加载字体资源，注意添加crossorigin属性：

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

4. 验证字体文件完整性
   使用FontForge等字体编辑工具打开字体文件，检查是否存在表结构损坏、不兼容Safari的特性，排除文件本身的兼容性问题。

内容的提问来源于stack exchange，提问作者Timur Zagidullin