同款Web字体在同版本浏览器同系统下显示异常问题咨询

这种同环境下仅单台机器出现字体显示问题的情况，确实大概率和系统层面的配置或缓存有关，结合你提到Chrome和Firefox都异常的情况，给你几个实用的排查和解决步骤：

• 检查本地字体冲突
  打开Windows开始菜单，搜索「字体」进入字体设置界面，搜索「Rubik」。如果发现本地安装了同名字体，很可能是本地字体优先级高于Web字体，或者本地字体文件损坏导致的。可以先暂时禁用该本地字体（右键选择「隐藏」），或者直接卸载，之后刷新浏览器测试是否恢复正常。

• 重置浏览器缓存
  浏览器的缓存文件损坏也可能导致字体加载异常：

  • Chrome：在地址栏输入 chrome://settings/clearBrowserData，勾选「缓存的图片和文件」，时间范围选择「所有时间」，点击清除后重启Chrome。
  • Firefox：在地址栏输入 about:preferences#privacy，找到「Cookie和网站数据」区域的「清除数据」，勾选「缓存的Web内容」，清除后重启Firefox。

• 重置Windows字体缓存
  Windows系统的字体缓存损坏是这类问题的常见诱因：

  1. 按下Win+R组合键，输入 services.msc 打开服务管理器，找到「Windows Font Cache Service」，右键选择「停止」。
  2. 打开文件资源管理器，在地址栏输入 C:\Windows\ServiceProfiles\LocalService\AppData\Local，找到所有以「FontCache」开头的文件（如FontCache.dat、FontCachePrivate.dat），删除这些文件。
  3. 回到服务管理器，右键「Windows Font Cache Service」选择「启动」，然后重启电脑后再测试字体显示。

• 验证Web字体加载配置
  虽然其他机器正常，但也可以快速确认下你的@font-face规则是否规范，比如是否包含了主流字体格式，font-family名称是否统一：

  @font-face {
    font-family: 'Rubik';
    src: url('rubik-regular.woff2') format('woff2'),
         url('rubik-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  

  同时可以在异常机器的浏览器开发者工具「网络」面板中，检查Rubik字体文件的加载状态（是否返回200），排除偶然的网络或文件路径问题。

内容的提问来源于stack exchange，提问作者Hristo Hristov