网页字体显示异常主因是字体加载路径错误、@font-face声明不合规（缺format()或font-weight/font-style不成对）、服务器mime类型错误（如woff2未返回font/woff2）、扩展干扰或系统同名字体冲突，需依序排查网络请求状态、修正css声明、配置服务器响应、启用无痕模式验证并清理本地字体。
网页本该显示的「Inter」或「思源黑体」在 Safari、Chrome 或 Edge 中变成 Times New Roman、方块或乱码，不是网页写错了，而是字体资源在加载路径、声明规则、服务器响应或本地环境任一环节被拦截或拒绝。
确认字体是否真正被请求并成功返回
打开问题网页 → 按 Command + Option + I（macOS）或 F12（Windows）调出开发者工具 → 切换到“网络”标签页 → 在筛选器中输入 fonts 或点击下拉菜单选“Fonts” → 刷新页面。
观察列表中自定义字体文件（如 inter-regular.woff2、source-han-sans-sc.woff2）的状态码：若为 404，说明路径错误；若为 0 或 (failed)，极可能是 file:// 协议限制（本地双击打开 HTML 时百度浏览器/旧版 Edge 直接禁用字体加载）；若为 200 但预览为空白，说明字体文件损坏或服务器未以正确 MIME 类型返回。
点击该字体请求 → 查看右侧“响应”面板：若提示“Failed to load response data”，说明服务器未返回二进制流；若内容可读但文字仍不显示，需继续排查 CSS 声明。
检查并修正 @font-face 声明
方法一：补全 format() 描述符并分离多格式声明
在开发者工具“元素”面板中 Command + F 搜索 @font-face，定位到对应 CSS 规则。若只写 src: url('inter.woff2'); 而未写 format('woff2')，【iOS/iPadOS Safari 15+ 及 macOS Safari 16+ 会静默跳过该字体】；若同时提供 woff2 和 ttf，必须为每种格式单独声明，例如：
@font-face { font-family: 'Inter'; src: url('inter.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('inter.ttf') format('truetype'); font-weight: 400; font-style: normal; }
方法二：验证 font-weight 与 font-style 是否成对存在
比如你引入的是 Inter Medium（字重 500），但 @font-face 中只写了 font-weight: 500，却漏掉 font-style: normal，那么后续使用 font: 500 16px "Inter" 时，Safari 因匹配失败直接回退到系统字体——【漏写 font-style 会导致 font 简写声明完全失效】。
验证服务器返回的 MIME 类型是否合规
第一步：在“网络”标签页中点击对应 woff2 字体请求 → 切换到“标头”（Headers）→ 向下滚动至 Response Headers → 找到 Content-Type 字段。
第二步：若显示 text/plain、application/octet-stream、application/font-woff2 或为空值，说明服务器未正确配置 MIME 类型。WOFF2 必须返回 font/woff2（注意不是 application/font-woff2），TTF 必须为 font/ttf。
第三步：Nginx 用户需在 mime.types 文件中添加 type font/woff2 woff2;，Apache 用户需启用 mod_mime 并添加 AddType font/woff2 .woff2。
排除浏览器扩展与本地字体干扰
方法1：启用无痕模式快速验证
按下 Shift + Command + N（macOS）或 Ctrl + Shift + N（Windows）新建无痕窗口，直接访问原网页。如果无痕下字体正常，说明已启用的扩展（如 Dark Reader、uBlock Origin）正在注入字体覆盖 CSS 或拦截字体请求。
方法2：禁用可疑 font-family 声明
在“元素”面板中 Command + F 搜索 font-family，定位到网站全局 CSS 或内联样式中覆盖性强的规则，点击右侧小方块图标取消勾选，观察文字是否立刻变清晰——这能快速判断是否被第三方样式劫持。
方法3：检查系统是否安装同名字体
某些 macOS 或 Windows 系统预装了名为 “Inter” 或 “Source Han Sans”的本地字体，但版本老旧或字形缺失。打开“字体册”（macOS）或“字体设置”（Windows），搜索并停用同名本地字体，避免 Safari 或 Chrome 优先加载损坏的本地副本。
Ubuntu 系统下 Chrome 中文字体异常专项处理
第一步：安装完整中文字体包
打开终端执行：
sudo apt update && sudo apt install fonts-noto-cjk fonts-noto-cjk-extra fonts-wqy-microhei fonts-wqy-zenhei
第二步：刷新字体缓存
执行 sudo fc-cache -fv 强制重建索引。完成后运行 fc-list :lang=zh 验证中文字体是否已识别。
第三步：重启 Chrome 并清空缓存
关闭所有 Chrome 窗口 → 在地址栏输入 chrome://settings/clearBrowserData → 时间范围选“所有时间” → 勾选“缓存的图像和文件” → 点击“清除数据” → 重新打开网页。
