Chrome为何渲染未定义的Nunito ExtraLight字体？技术求助

云上老周

2026-7-9

Chrome中Nunito字体渲染异常问题排查与解决

可能的原因

本地字体干扰：系统中已安装Nunito字体时，Chrome会优先加载本地文件，若本地Nunito ExtraLight被设为默认权重，会直接覆盖你导入的线上字体设置。
CSS规则冲突：页面内存在优先级更高的CSS选择器，悄悄设置了font-weight: 200（Nunito ExtraLight对应的权重值），覆盖了body的字体配置。
DevTools显示bug：偶尔Chrome DevTools会出现字体名称解析错误，实际渲染的是正确字体，但显示名称异常，可通过截图对比字体样式验证。

解决步骤

明确指定字体权重：设置body字体时同时声明权重，避免浏览器自动匹配本地字体：

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 500; /* 对应Medium权重，按需调整为400（Regular）、600（SemiBold）等 */
}

强制使用Web字体：通过@font-face手动定义字体，精准控制加载来源，避免本地字体干扰：

@font-face {
  font-family: 'Nunito';
  font-weight: 500;
  src: url('https://fonts.gstatic.com/s/nunito/v25/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3iazbXWjbjI.woff2') format('woff2');
  font-display: swap;
}

排查CSS冲突：用Chrome DevTools的「Elements」面板检查body的font-weight属性，查看是否被其他规则覆盖，找到后调整选择器优先级或修改对应规则。
清除字体缓存：在Chrome地址栏输入chrome://settings/clearBrowserData，选择「缓存的图片和文件」清理后重启浏览器测试。
临时卸载本地字体：若确认是本地字体导致，可暂时卸载系统中的Nunito字体，验证是否恢复正常。