如何在Chrome DevTools中查找使用特定font-family的CSS类？

方法1：控制台脚本批量抓取 #

打开Chrome DevTools控制台（快捷键F12/Ctrl+Shift+I），切换到Console面板，粘贴以下代码执行：

document.querySelectorAll('*').forEach(el => {
  const style = window.getComputedStyle(el);
  if (style.fontFamily.includes('Lato')) {
    console.log('对应类:', el.className, '元素:', el);
  }
});

执行后控制台会输出所有应用了Lato字体的元素及其绑定的CSS类，直接收集这些类即可。

方法2：全局搜索字体规则 #

1. 打开DevTools的全局搜索框（快捷键Ctrl+Shift+F）
2. 搜索关键词 font-family: *Lato*，在搜索选项里选择Styles（只搜CSS样式）
3. 搜索结果会直接显示所有定义了Lato字体的CSS规则，对应的选择器就是你需要替换的CSS类。

方法3：通过元素样式溯源 #

1. 在Elements面板点击任意元素，切换到Computed标签
2. 找到font-family属性，查看是否包含Lato
3. 如果包含，点击属性值旁边的箭头（或右键选择「Go to Rule」），直接跳转到对应的CSS规则，获取绑定的类名。

Webflow生成的CSS类名通常带有可视化编辑的标识（比如heading、text-block前缀），结合上面的方法可以快速定位所有使用Lato的类，不用逐个点击元素排查。

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