React项目中Segoe UI字体Mac端失效Windows端正常的问题求助

问题原因 #

1. @font-face语法错误：CSS规范明确禁止在@font-face规则的属性中使用!important，你加的这些!important会导致浏览器直接忽略整个自定义字体声明。Windows端显示正常是因为系统本身自带Segoe UI字体，而Mac系统没有内置该字体，只能 fallback到默认字体。
2. 字体名称冲突：自定义字体和系统潜在的同名字体（若存在）重名，浏览器可能优先选用系统字体，导致你的自定义字体未生效。
3. 格式/路径问题：代码里format("TTF")不是标准写法，部分浏览器不识别；另外React打包后字体文件路径可能错乱，导致Mac浏览器加载失败。

解决方法 #

1. 修复@font-face语法与格式 #

去掉@font-face内所有!important，改用自定义字体名称避免冲突，同时修正格式标识：

// 先声明字体，再设置body样式
@font-face {
  font-family: "Segoe UI Custom"; /* 自定义名称，避开系统字体名 */
  src: url("./assets/fonts/SegoeUI.eot?#iefix") format("embedded-opentype"),
    url("./assets/fonts/SegoeUI.woff2") format("woff2"),
    url("./assets/fonts/SegoeUI.woff") format("woff"),
    url("./assets/fonts/SEGOEUI.TTF") format("truetype"); /* 标准小写格式名 */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Segoe UI Custom", sans-serif !important; /* 使用自定义字体名 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

2. 确保字体路径正确 #

• 若用Create React App，建议把字体文件放到public/fonts目录下，路径改为绝对路径/fonts/SegoeUI.woff2，避免打包后路径偏移。
• 检查所有字体文件是否完整存在于指定目录，无损坏或遗漏。

3. 清除浏览器缓存 #

Mac端按Cmd + Shift + R强制刷新浏览器，清除旧缓存资源，确保新字体文件被加载。

4. 验证字体加载状态 #

打开浏览器开发者工具（Cmd+Opt+I），在「网络」面板筛选「字体」类型，查看自定义字体是否成功加载，排查404等加载错误。

内容的提问来源于stack exchange，提问作者Sohaib Ashraf