如何查看页面上的字体？

您通常可以知道网站页面或文档中使用的字体类型。根据您阅读内容的位置以及您打算检查字体样式的频率，有几种方法可以采取。

文档中的字体

如果您正在使用文字处理器检查文档，请选择文本并检查工具栏中的字体选择。应该会显示粗体文本中使用的字体。

网站上使用的字体

通过插件

如果您经常想检查网站上使用的字体，您可能希望为您的网页浏览器获取一个插件。您可以通过工具栏上的图标访问这些插件，并且它们会在您打开网页时立即启动。大多数插件的工作方式相似，要么通过选择文本并高亮显示，要么通过单击字体并选择工具栏按钮。需要弹出屏幕或包含字体名称的文本气泡。

1. Fontanello（Chrome + Firefox）

确定网站使用什么字体的最快方法是使用 Fontanello Chrome 和 Firefox 扩展。要查看字体系列和其他几个属性，只需右键单击文本，从菜单中选择 Fontanello，然后就大功告成了！

2. Visual Inspector（Chrome）

与前两个相比，Visual Inspector Chrome 扩展具有更多的深度。尝试单击浏览器工具栏中的 Visual Inspector 按钮启动工具，然后导航到 Typography 子菜单。现在将显示所有使用的字体样式以及对主页上所有字体的分析。

3. WhatFont（Chrome 和 Safari）

我查找字体的首选方法是 WhatFont Chrome 和 Safari 扩展。您必须选择浏览器菜单中的 What Font 图标才能启动该工具。现在您可以选择多个文本块，与 Fontanello 相比，您可以更清楚地看到字体分布。

4. 老牌的代码检查（所有浏览器）

为了了解更多关于使用的字体类型而无需安装数千个浏览器扩展，我们可以执行简单的代码分析，如下所示：在 Google Chrome 中右键单击神秘文本并选择“检查”。当 DevTools 打开时，请确保选择了“Styles”选项卡，然后单击“Font-Family”属性以获取有关字体类型的更多信息。在 Firefox 中右键单击文本并选择“检查元素”。他们的检查器会出现；转到实际的“Fonts”选项卡以找到您想要的信息。

如果您使用的是 Safari，请通过勾选 Safari 设置“高级”选项卡底部附近的选项来确保显示“开发者”菜单。再次右键单击文本并选择“检查元素”。选择“Styles - Computed”选项，如果详细信息侧边栏已关闭，请将其打开。“font-family”部分将显示样式属性中的字体信息。

5. 揭示重命名字体（高级方法）

每当字体系列没有明确定义时，字体检查工具和过程会自动混淆，这对我们来说是一个挑战。我们实际上是先下载字体。

完成此操作有几种方法，但首先要记下当前字体类型的名称。打开检查器工具，然后向下滚动到“Frames”区域，然后从“Application”选项卡上的“Inspector”菜单中选择“Fonts”。之前的字体名称必须与文件名匹配。现在在新标签页中单击该字体的下载按钮。然后，当我们将其拖到出色的“What Can My Font Do?”网站时，字体信息就会被美观地展示出来。

通过文本编辑器或文字处理器

在网站上，您可以高亮显示您想知道其字体的文本。使用鼠标右键菜单或键盘快捷键 **Ctrl+C** 复制文本。打开文字处理器或文本编辑器，然后在新文档中粘贴内容（使用鼠标右键选择粘贴，或在键盘上 **点击 Ctrl+V**）。再次，在文字处理文档中划线文本，并检查工具栏中的字体选择。该文本使用的字体必须可见。

通过源代码

检查网站的源代码是一种更具挑战性但仍然可行的方法。通常可以通过右键单击网页并从弹出菜单中选择“查看页面源代码”选项来查看源代码。那里会显示已创建的网页的源代码。您可以在此源代码中找到用于网页内容的字体样式。但是，字体样式通常提供在可能看不到的 CSS 文件中。