选项 1：使用浏览器扩展程序（简单）

WhatFont等扩展（适用于 Chrome、Firefox 和 Safari）可以很容易地检测网页中任何文本的字体系列。您只需要安装扩展程序，在站点上激活它并单击要检查的元素。结果显示在浮动框中，始终在您选择的上下文中。

选项 2：使用浏览器检查器手动检查 CSS（高级）

大多数网络浏览器让您可以使用right-click→ 'Inspect' 或 'Inspect Element' 轻松找到字体。也可以通过按 来完成F12。这将显示附加到网站的样式列表，您可以浏览该列表以查找任何 HTML 元素中使用的字体。

使用检查器不像使用扩展那么简单，但它有几个优点。需要对 CSS 有所了解，因为您通常需要通过几种样式才能找到正在应用的样式。作为一般规则，被划掉的样式将被覆盖，因此请始终查找最后应用的样式。

页面中的所有样式都列在样式选项卡中，但如果您改用计算选项卡，您可以找到主动应用于您选择的元素的属性，当然包括字体系列。

最后，另一种快速检查全局（但不是如何或在何处）使用的字体的方法是转到'Application → Frames → Fonts'。在那里，您将找到所有引用（非系统）字体的列表。

第二种方法速度较慢，但​​使用检查器可以让您深入了解整个页面的构建方式。此外，许多设计人员和开发人员在将更改实际写入样式表之前将其用作测试更改的工具（因为在检查器中更改 CSS 行会触发浏览器中的实时预览）。

浏览器的“检查元素”并不完美

使用浏览器的开发人员工具是查看网站 CSS 中声明了哪些字体的好方法。这并没有显示实际渲染的字体——它只显示正在应用的字体堆栈——渲染的实际字体可能会因安装的字体等而异。

另一个有用的工具是Font。

Fount 会告诉您您实际看到的字体堆栈中的哪种网络字体——而不仅仅是应该看到的内容。它还会告诉您字体大小、粗细和样式。

使用 Fount 就像添加书签一样简单。无需安装应用程序或任何扩展程序。

添加书签后：

1. 转到任何站点并单击“字体”小书签。
2. 单击您要识别的任何类型。重复。
3. 要关闭 Font，只需再次单击小书签。

Fount 适用于 Safari、Chrome、Firefox 和 IE8+。

我喜欢 Chrome 浏览器扩展CSSViewer。您只需单击它并将鼠标悬停在您要识别的字体上，它就会向您显示字体系列。

FontFinder 是为设计师、开发人员和排版师创建的。它允许用户分析页面上任何元素的字体信息，将该信息的任何部分复制到剪贴板，并执行内联替换以测试新布局。

这个插件是查找字体和其他 css（如字体粗细、大小和更多表单网页）的最佳选择。