如何从网站识别字体

您是否曾经在不同的网站、图片或博客上为您的网站找到完美的字体，但不知道如何找到它的名称？ 你来对地方了。 在本指南中，我们将向您展示如何从网站中识别字体，以帮助您找到适合您业务的完美排版。

为什么查看网站使用的字体很有用？

如果您正在构建您的网站或设计您的在线内容，您总是在寻找改进它的方法。 您可以通过多种方式做到这一点。 最明显的是使用不同的主题、添加功能并提供更好的内容。 但是，您还可以采取其他不那么明显的措施来超越竞争对手并使您的网站与众不同。 字体就是其中之一。

您使用的字体遍布您的网站，不仅可以提高可读性，还可以提高整体导航。 如果您的排版看起来很专业并且易于阅读，那么您的访问者更有可能留在您的网站上。 字体经常被忽视，但会产生很大的影响。

即使您可以将字体添加到您的网站，您也可能希望使用通过传统方式找不到的排版。 互联网上到处都是带有漂亮字体的网站，您可能想在自己的网站上使用它们。 但是，困难的部分是识别这些网站使用的字体。 找到字体没有简单的方法，即使您是专家，每种字体也存在大量微小差异。 此外，字体样式和 CSS 更改可能会放大这些差异。

这就是为什么在这篇文章中，我们将向您展示如何使用不同的工具来找出网站使用的字体。

如何从网站识别字体

有多种方法可以识别网站上的字体：

1. 使用检查工具
2. 带插件
   1. FFF回退
   2. 字体
   3. 丰塔内洛
   4. 什么字体

其中一些比其他更难使用，有些可能需要外部工具和扩展。 让我们仔细看看所有这些不同的方法。

1) 使用检查工具识别字体

从网站识别字体的最基本方法是使用浏览器的检查工具。 为此，您必须打开浏览器的开发人员工具。 通常，您可以通过几种不同的方式执行此操作：

• 在浏览器上按 F12 或 Ctrl+Shift+I
• 右键单击打开浏览器的菜单，然后转到检查
• 从浏览器的菜单中打开开发者工具选项并转到Web Developer

当您找到您喜欢的字体时，右键单击包含您要识别的字体的文本，然后单击检查元素。

该元素将在检查器工具上突出显示，您将在检查器旁边的框中看到样式和布局。

然后，单击Computed选项卡并向下滚动以检查Font-Family字段。 该字段应列出网站的字体。 例如，在本例中，字体为 Roboto 或 SF-Pro Display。

这样，您可以使用 Inspector 工具识别任何网站上的字体。 但是，您可能会发现无法右键单击或访问检查器工具的站点，因为它们不允许这样做。 如果是这样的话，还有另一种选择。 您还可以使用专用工具查看网站使用的字体。

让我们看一下可用于识别网站字体的一些最佳插件。

2) 使用工具和插件识别字体

如果您无法在网站上使用检查器工具，则可以使用专用工具和插件来识别字体。 那里有几种工具，为了让您的生活更轻松，我们将列出最好的工具，并向您展示如何使用它们来查找和识别不同网站上使用的字体。

2.1) FFFF回退

FFFFallback是一个简单的书签工具，可用于识别任何网站上的字体。 最好的部分是你不需要安装任何东西。 您只需将小书签保存到您的书签选项卡，然后在任何站点上单击其书签即可检查字体。 该工具使用 Javascript 扫描 CSS 并识别排版及其字体样式。

要使用此工具，您需要打开此页面。 然后，单击FFFFALLBACK按钮并将其拖到您的书签栏，如下所示。 如果浏览器上未显示书签栏，请按Ctrl+Shift+B启用它。

现在，打开一个您想要识别字体的网站，然后单击您刚刚保存在书签栏上的书签。 它应该在新列上显示网站的字体系列和样式，如下所示。 确保选择Web Font作为顶部的选项。

2.2) 字体

Fount 类似于 FFFFALLBACK，但它也可以让您检查特定文本的字体。 这样，您可以指定要检查字体的文本。

要使用 Fount，请转到此站点并将Bookmarklet从其网站拖放到您的书签选项卡中以保存它。

然后，打开您要检查字体的任何网站，然后单击“字体”书签。 这会将您的光标更改为加号。 只需单击任何文本，它就会在屏幕右上角显示已识别的字体。

在您知道该文本的字体后，您可以再次单击字体框以禁用光标并像往常一样继续浏览您的页面。

2.3) 丰塔内罗

如果您更喜欢使用浏览器扩展，Fontanello 是您识别任何网站字体的完美工具。 只需在 Chrome 或 Firefox 上安装 Fontanello 扩展程序并激活它。

要识别网站上的字体，只需右键单击任何文本并选择Fontanello选项。 下拉菜单将显示字体系列及其样式和变体。

2.4) 什么字体

或者，您可以以类似的方式使用WhatFont扩展。 首先，在 Chrome 或 Firefox 上安装扩展程序。 然后，单击浏览器工具栏上的 WhatFont 工具图标，然后单击任何文本以检查其字体。 好消息是您可以选择不同的文本并查看它们同时使用的排版。

完成后，按Exit WhatFont关闭字体弹出窗口并照常使用网页。

既然我们已经了解了如何从文本中识别字体，您可能想知道是否可以从图像中做同样的事情。 答案是肯定的！ 让我们看看如何做到这一点。

如何从图像中识别字体

除了从文本中发现字体外，您还可以通过图像识别网站中的字体。 为此，我们将使用名为WhatTheFont的在线工具。

什么字体

这个在线工具可以让你上传任何图像，分析图像的文本，并告诉你它使用的是什么字体。

为此，请转到此页面并将图像拖动或上传到工具上（确保它是 JPG 或 PNG 格式。）然后，为文本定义裁剪框，该工具将显示正确的字体文本。 最重要的是，WhatTheFont 还为您提供了可以购买字体的网站，甚至可以让您使用自定义文本测试字体。

这样，您可以从图片或屏幕截图中检查字体。 此外，它还有一个移动应用程序，您也可以使用它来识别手机中的字体。

结论

总而言之，您使用的字体会对您的网站产生重大影响。 它可以帮助您提高可读性、整体导航并让您的访问者停留更长时间。 清晰度和可读性是任何网站的重要方面，您投入的精力越多，您获得的结果就越好。

在本指南中，我们看到了识别网站字体的不同方法：

• 使用浏览器检查工具
• 使用书签工具
• 通过浏览器扩展
• 使用专门的在线工具从图像中识别字体

找到正确的字体后，您可以选择如何将它们添加到您的网站。 选择要使用的字体后，我们建议您查看我们的指南，了解如何在 WordPress 中更改字体以立即切换到新字体。

如果您正在寻找更多方法来提高 WordPress 网站的可读性和导航，您还可以查看以下文章：

• 如何在 WordPress 中添加面包屑
• 按品牌组织 WooCommerce 产品
• 如何添加 WordPress 大型菜单

你发现新字体了吗？ 您使用了哪种方法？ 在下面的评论部分让我们知道！