如果你曾经完全被网站上看到的字体所吸引,那么你可能想知道如何发现它的名称,以便可以在自己的内容中使用它。高质量的字体可以改善访问者的阅读体验,因此可能值得尝试一下。不管你检查网站上使用哪种字体的原因,都有许多可以帮助你的工具。

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


精美易读的字体可以改善你网站的用户体验(UX)和可读性。它还可以确保访问者可以舒适地与你的内容互动,而不会费力地解密它。如果你的文字时尚但难以辨认,读者会发现很难理解或欣赏你的资料。

如果它们的文字不可读,那么号召性用语(CTA)按钮也可能几乎全部无效。这就是为什么你可以方便地保存一些字体的原因,因为它们既时尚又易读。然后,你可以在网站上使用它们,也可以将来将其用于客户。

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

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

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

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

首先,右键单击包含你要查找的字体的网页。从出现的菜单中,选择“检查”,或者按下键盘快捷键 Crtl+Shift+i,如果你使用的是 Mac,则按下 Cmd+Shift+i

在屏幕右侧或下侧弹出的窗口中,点击相应的 HTML 元素时,它将突出显示:

选择要查看字体的元素

接下来,点击“计算”,找到“font-family”,你应该在此处看到字体的名称及其样式。

查看元素的字体名称

要查看与字体相关的 CSS,请在 “样式” 选项卡下查找。你可以滚动浏览以搜索与字体相关的值。但是,由于此处可能存在覆盖和不相关的样式规则,因此 “ 计算” 选项卡通常更有用。

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

浏览器扩展程序可以提供一种更直接的方法来查找网站上的字体详细信息,尤其是当你对 Inspector 不满意时。另外,他们通常可以更快地提供你正在寻找的答案,以便你可以立即完成任务。

这些附加组件包括:

  • Fontanello: 免费使用,此扩展程序使你能够在浏览时突出显示并右键单击字体,从而更轻松地找到字体的名称,粗细,样式。
  • WhatFont:进一步简化了字体检测,WhatFont 使你只需将鼠标悬停在其上即可查看字体名称。
  • CSS Peeper:此扩展是针对 Web 设计人员而设计的,它的功能更强大,可以告诉你网页 CSS 代码中的其他详细信息。

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

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

安装 WhatFont 之后,你可以通过在浏览器的工具栏中将其激活并悬停在某些文本上来检查网站使用的字体:

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

完成字体详细信息检查后,你可以使用浏览器窗口右上角的 Exit WhatFont 按钮退出该工具。

3. 检测图像中的字体

最后,你也可以尝试查看图像中使用的字体。这包括你在 Logo 中或信息图表中看到的字体。根据我们在字体检测器方面的经验,WhatTheFont 是最有效的在线工具。

要使用 WhatTheFont,你需要上传相关图片并选择具有相关字体的部分,然后,它将返回一个结果页面,其中包含几种字体,即使不是完全匹配,它们也与你尝试识别的字体相似。

根据字体的来源和受欢迎程度,你的成功率可能会有所不同。如果字体的确切名称对你来说非常重要,则可能很难找到可以满足你需求的工具。

但是,如果你愿意使用与在图像中找到的字体相似的字体,则在线检测器应该可以满足你的需求。