React中如何使用系统未安装的SF Pro字体？

1. 修正@font-face的命名与规则 #

浏览器可能会优先匹配系统字体的名称，哪怕你已经卸载了SF Pro，也可能因为缓存或字体别名导致不加载自定义字体。建议给自定义字体改个独特的名称，同时完善规则：

@font-face {
  font-family: 'SF Pro Custom'; /* 避免与系统字体重名 */
  src: url('/fonts/SF-Pro.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 确保 fallback 字体先显示，避免页面空白 */
}

之后页面中引用时，使用这个自定义名称：

body {
  font-family: 'SF Pro Custom', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

2. 验证字体文件的可访问性 #

打开浏览器开发者工具（快捷键F12），切换到「网络」面板，刷新页面后搜索SF-Pro.ttf：

• 如果返回404状态码：检查文件路径是否正确，确认SF-Pro.ttf确实放在项目public/fonts目录下，注意文件名大小写（服务器环境通常区分大小写）。
• 如果返回200但字体仍不生效：查看响应头是否允许跨域（本地项目一般不会有这个问题）。

3. 清除浏览器缓存 #

移除系统字体后，浏览器可能还缓存了旧的字体关联信息：

• 强制刷新页面：使用Cmd+Shift+R（Mac）或Ctrl+Shift+R（Windows）。
• 清除浏览器的字体缓存：在浏览器设置中找到「清除浏览数据」，勾选「缓存的图片和文件」后清除。
• 给字体URL加版本参数：比如url('/fonts/SF-Pro.ttf?v=1')，强制浏览器重新请求文件。

4. 补充多格式字体支持 #

仅提供TTF格式可能在部分浏览器存在兼容性问题，建议转换并添加WOFF2格式（压缩率更高，加载更快）：

@font-face {
  font-family: 'SF Pro Custom';
  src: url('/fonts/SF-Pro.woff2') format('woff2'),
       url('/fonts/SF-Pro.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

可使用免费工具将TTF转成WOFF2，本地处理更安全。

5. 检查系统字体残留 #

有些Mac系统可能内置了SF Pro的变种字体（比如SF Pro Display、SF Pro Text），即使卸载了主字体，这些变种可能仍存在。可以在字体册中彻底搜索并移除所有SF Pro相关字体，然后重启浏览器再测试。

内容的提问来源于stack exchange，提问作者János