导入的Google Fonts字重在部分设备上失效问题求助

1. 强制排除本地字体干扰 #

浏览器会优先加载本地安装的同名字体，哪怕你导入了线上字体。可以通过@font-face规则明确指定字体来源，甚至排除本地字体：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  /* 优先匹配指定本地字体名，无匹配则加载服务器字体文件 */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('/fonts/open-sans-light.woff2') format('woff2'),
       url('/fonts/open-sans-light.woff') format('woff');
  font-display: swap;
}

如果使用线上字体服务，务必在引入时明确指定需要的300字重，同时添加字体加载策略参数，避免浏览器仅加载默认字重。

2. 验证生产环境字体加载状态 #

用浏览器开发者工具的Network面板，过滤Font类型，检查300字重的Open Sans字体文件是否成功返回200状态码。如果加载失败，大概率是CDN访问问题，建议把字体文件下载到自己的服务器，用本地路径引用。
同时要确保字体引入代码（link标签或@font-face）放在所有CSS样式之前，避免浏览器先解析样式再加载字体，导致临时使用本地字体后无法切换。

3. 清除设备端缓存 #

部分设备显示异常是缓存旧资源或本地字体缓存导致的：

• 强制刷新页面（Ctrl+Shift+R / Cmd+Shift+R）清除浏览器缓存
• 清除浏览器的网站数据和字体缓存
• Windows用户可通过控制面板重置字体缓存，Mac用户可重启设备或用终端命令重置字体缓存

4. 明确指定元素的字体属性 #

在需要使用300字重的元素CSS中，同时明确指定font-family和font-weight，不要依赖继承，减少浏览器匹配歧义：

.light-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

5. 适配不同系统的渲染差异 #

Windows和Mac的字体渲染机制不同，可能导致字重显示观感有差异：

• 确保使用官方原版Open Sans 300字重文件，不要用第三方修改版
• Windows用户检查是否开启ClearType，Mac用户检查字体平滑设置，这些系统设置会影响字体渲染效果

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