React项目部署后Raleway字体在iPhone Safari中不显示如何解决？

1. 确保字体格式兼容全浏览器 #

iOS Safari对字体格式有特定要求，需提供多格式字体文件覆盖所有场景，包括woff2、woff、ttf、eot，旧版iOS可能还需svg格式。

在CSS中通过@font-face完整声明：

@font-face {
  font-family: 'Raleway';
  src: url('/fonts/Raleway.eot');
  src: url('/fonts/Raleway.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Raleway.woff2') format('woff2'),
       url('/fonts/Raleway.woff') format('woff'),
       url('/fonts/Raleway.ttf') format('truetype'),
       url('/fonts/Raleway.svg#Raleway') format('svg');
  font-weight: normal;
  font-style: normal;
}

确认所有格式的字体文件已部署到服务器对应路径。

2. 检查字体文件路径正确性 #

React项目中，字体文件建议放在public/fonts目录下，引用时使用绝对路径（以/开头），避免路由切换时相对路径失效。不要将字体放在src目录，否则构建后路径可能混乱。

3. 强制字体加载优先级 #

在全局样式中明确指定字体，并添加属性避免浏览器 fallback 到默认字体：

body {
  font-family: 'Raleway', sans-serif !important;
  font-display: swap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

!important可临时覆盖样式优先级问题，后续尽量通过样式层级优化替代。

4. 验证字体加载状态 #

连接iPhone到Mac，开启Safari调试模式，在网络面板查看字体文件请求：

• 返回404：路径错误，检查文件部署位置和引用路径
• 返回200但字体不显示：文件损坏或格式不兼容，重新下载官方Raleway字体

5. 清除iOS Safari字体缓存 #

iOS Safari可能缓存旧字体文件，尝试：

• 进入设置 > Safari > 清除历史记录与网站数据
• 在字体URL后添加版本号或哈希值强制刷新，例如：

url('/fonts/Raleway.woff2?v=1.0.0') format('woff2')

6. 备选：使用Google Fonts CDN加载 #

若本地部署问题难以排查，直接在public/index.html中添加CDN链接：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap" rel="stylesheet">

然后在CSS中直接调用：

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

CDN方式会自动适配浏览器所需字体格式，规避本地部署的路径和格式问题。

内容的提问来源于stack exchange，提问作者saraa sash