Chrome DevTools Lighthouse提示未使用CSS，移除后页面字体变更原因咨询

这是Lighthouse检测逻辑和实际页面字体依赖的认知偏差导致的，核心原因有这几点：

• Lighthouse仅检测快照时刻的DOM元素
  Lighthouse判定“未使用CSS”时，只会扫描检测瞬间页面已渲染的DOM元素，统计实际用到的字体权重。你引入了400/500/700三个权重，但如果当前页面只有部分权重被用到（比如正文用400、标题用500，700完全没用到），Lighthouse会把未被使用的权重对应的@import部分标记为可移除。但整个@import语句是一个整体，移除后所有权重的字体都会丢失，浏览器只能 fallback 到系统默认字体，视觉上自然变化明显。

• 缺少字体备选方案放大了差异
  你的font-family只指定了Noto Sans SC，没有设置备选字体。当字体被移除后，浏览器会自动选用系统默认的无衬线字体（不同系统的默认字体差异很大），这和原来加载了Noto Sans SC的效果差距被放大，让你觉得字体“明显变化”。

• 动态内容的隐性依赖未被检测到
  如果页面里有JS动态生成的内容（比如弹窗、异步加载的列表），这些内容在Lighthouse检测的快照时刻还没出现在DOM里，Lighthouse就不会统计它们对字体的使用需求。但实际用户浏览时这些内容会加载，需要用到该字体，移除@import后这些动态内容的字体也会 fallback，导致整体页面字体不一致。

验证和解决方法 #

1. 用Chrome DevTools的Coverage面板，勾选「CSS」和「Fonts」选项，重新录制页面加载和交互过程，就能看到哪些字体权重是真正被使用的。按需修改@import语句，只引入需要的权重，比如只用400和500的话，改成：

   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500&display=swap');
   

2. 给font-family添加备选字体，降低字体加载失败时的视觉差异：

   html,
   body {
     font-family: "Noto Sans SC", sans-serif;
   }
   

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