如何查看网站使用的字体

如果您曾经完全被您在网站上看到的字体所吸引，您可能想知道如何发现它的名称以便您可以在自己的内容中使用它。 优质的排版可以改善访问者的阅读体验，因此可能值得努力找到它。 无论您出于何种原因检查网站上使用的字体，都有许多工具可以提供帮助。

在本文中，我们将讨论为什么您可能想要查看网站使用的字体。 我们还将向您展示如何执行此操作。

让我们开始吧！

https://www.youtube.com/watch?v=0poLzoHbVLA

订阅我们的 YouTube 频道

为什么您可能想要检查网站使用的字体

正如我们已经提到的，漂亮且可读的字体可以改善您网站的用户体验 (UX) 和可读性。 它还确保访问者可以轻松地与您的内容互动，而无需费力破译。 如果您的文字时尚但难以辨认，读者会发现很难理解或欣赏您的材料。

如果文字不可读，号召性用语 (CTA) 按钮也可能变得毫无用处。 这就是为什么您可能会发现保留一份字体列表很方便，这些字体既时尚又易读。 然后，您可以在您的网站上或将来为客户使用它们。

如何查看网站使用的字体（3 种可用方法）

您可以使用多种方法来检查网站使用的字体。 浏览器的检查功能是一个很好的首选解决方案，但也有一些扩展可以产生相同的效果。 您甚至可以使用在线工具从图像中查找字体。 让我们来看看这些选项中的每一个。

1. 使用浏览器检查器工具识别字体

检查网站使用的字体的最简单方法之一是使用浏览器的检查器工具。 尽管在本示例中我们将使用 Chrome Inspector，但值得注意的是，其他浏览器也具有相同的功能。

首先，右键单击包含您要查找的字体的网页。 从结果菜单中，选择 检查：

如果您更愿意使用键盘快捷键，请尝试 Ctrl+Shift+I 适用于 Windows 或 Linux。 如果您使用的是 Mac，则相当于 Cmd+Shift+I。

在屏幕右侧的窗口中，使用您要查看的字体查找文本。 当您选择相应的 HTML 元素时，它将突出显示：

接下来，点击 计算 选项卡并搜索“font-family”：

您应该会看到此处列出的字体名称及其样式。

要查看与字体相关的 CSS，请查看 样式 标签。 您可以滚动浏览以搜索与字体相关的值。 但是，由于此处可能存在覆盖和不相关的样式规则，因此 计算 选项卡通常更有帮助。

2. 通过浏览器扩展查找字体

浏览器扩展可以提供一种更直接的方式来查找网站上的字体详细信息，尤其是当您对 Inspector 不满意时。 此外，他们通常可以更快地提供您正在寻找的答案，以便您可以回到手头的任务。

一些此类附加组件包括：

• 丰塔内罗： 免费使用，此扩展程序使您可以通过在浏览时突出显示并右键单击字体来查找字体的名称、粗细、样式等。
• 什么字体： 进一步简化字体检测，WhatFont 使您只需将鼠标悬停在字体上即可查看字体名称。
• CSS窥视器： 考虑到网页设计师，这个扩展更加健壮，可以从网页的 CSS 代码中告诉你更多的细节。

但是，这些扩展中的每一个都有不同的浏览器支持。 WhatFont 可用于 Firefox、Chrome、Safari 和 Internet Explorer。 另一方面，Fontanello 仅适用于 Firefox 和 Chrome。 CSS Peeper 是 Chrome 专用的工具，您将无法在任何其他平台上使用。

为了快速找到特定字体的名称，WhatFont 是最容易使用的选项。 由于它还支持大多数浏览器，我们将使用它进行快速演示。

安装 WhatFont 后，您可以通过在浏览器的工具栏中激活它并将鼠标悬停在某些文本上来检查网站使用的字体：

当您第一次将鼠标悬停在文本上时，您只会看到字体的名称。 但是，单击名称会显示一个展开的弹出窗口，其中包含更多详细信息，例如大小、粗细、颜色和行高。 它还可以通过 Typekit 或 Google Fonts 识别字体是否可用。

完成检查字体详细信息后，您可以使用 退出WhatFont 浏览器窗口右上角的按钮。

3. 检测图像中的字体

最后，您还可以尝试查看图像中使用的字体。 这包括您在徽标或信息图表中看到的字体。 根据我们使用字体检测器的经验，WhatTheFont 是完成这项工作的最有效的在线工具。

要使用 WhatTheFont，您需要上传相关图片并选择具有相关字体的部分：

然后它会返回一个结果页面，其中包含与您要识别的字体相似（如果不是完全匹配）的几种字体：

您在这里的成功率可能会因字体的来源和受欢迎程度而异。 如果字体的确切名称对您来说非常重要，则可能很难找到一种工具可以满足您的需求。

但是，如果您愿意使用与您在图像中找到的字体相似的字体，那么在线检测器应该可以很好地满足您的需求。

结论

视觉上吸引人且清晰易读的字体可以增强网站访问者的阅读体验。 这可能会提示您继续寻找可以在您的网站或为您的客户使用的新字体。 无论您出于何种原因想要检查网站使用的字体，都有许多工具可以帮助您。

在这篇文章中，我们讨论了三种查看网站使用的字体的方法：

1. 使用浏览器检查器工具识别字体。
2. 使用诸如 WhatFont 之类的浏览器扩展程序查找字体。
3. 使用 WhatTheFont 检测图像中的字体。

您对如何检查网站上使用的字体有任何疑问吗？ 在下面的评论部分让我们知道！

图片来自 rudall30/shutterstock.com