使用开发者工具识别 Chrome、Edge 和 Firefox 中的字体

一个典型的网页通常由几个不同的元素组成，其中大多数元素以不同的颜色编码，并以不同的字体和样式书写。有时，我们会遇到设计精美的网页，让我们想要深入研究它们的属性；也许是一个非常优雅的主题或一个漂亮、专业的字体。

熟悉字体并对其着迷的人经常使用免费的在线字体识别工具(free online font identifier tools)来帮助发现网络上的字体。这些在线工具要求您输入URL或上传显示字体的图像，然后对其进行检查。如果您不想经历学习使用新工具的麻烦，这篇文章适合您。今天，我们将讨论用户如何在不使用浏览器扩展、应用程序或任何在线工具的情况下识别特定网页使用的字体。

我们将在本文中讨论的过程将围绕大多数 Web 浏览器提供的设置展开，即“开发人员工具(Developer Tools)”，或者更具体地说，一个名为“检查元素(Inspect Element)”的选项。在这里，我们将讨论如何在两种浏览器中识别字体——Chrome、Edge和Firefox。

(Identify)在Firefox中使用(Firefox)Inspect Element识别网页上的字体

访问您要识别的字体的网页，然后右键单击以您感兴趣的字体编写的文本。

从显示的选项列表（上下文菜单）中，单击Inspect Element。这样(Doing)做会打开页面底部的开发者工具。(Developer Tools)

在Development Tools(Development Tools)部分的右下角，您会找到一个名为Fonts的子标题，单击它。

然后它将为您显示您想要查看的字体的属性，例如其大小、行高、粗细等，以及字体是否为斜体，尽管这总是显而易见的。

如果您有兴趣了解更多关于所使用字体的信息，Firefox也为您提供了相关信息。如果您向下滚动字体部分并单击“页面上的所有字体”，字体选项卡将展开，您将看到当前正在浏览的网页上使用的所有字体，以及它们的位置正在使用。不仅如此，您还可以预览特定字体的外观。将鼠标悬停在开发人员工具(Developer Tools)中的字体上会突出显示使用该字体的网页部分。

使用Chrome(Chrome)中的开发者工具(Developer Tools)识别字体

该过程与上述过程类似。像使用Firefox(Firefox)一样按照前两个步骤打开页面右侧的开发人员工具。(Developer Tools)

使用开发者工具识别 Firefox 和 Chrome 中的字体

单击“计算”子标题。

向下滚动(Scroll)一点，您会找到有关您感兴趣的字体的信息（字体的系列、大小等）

不幸的是，Chrome不像Firefox那样为您提供任何附加信息。

(Identify)使用Edge Developer Tools确定使用的字体(Font)

哪个字体边缘

  1. 开边
  2. 右键单击并选择文本
  3. 选择检查
  4. 在打开的开发者工具(Developer Tools)中，在Computed下查看(Computed)
  5. 您将看到字体详细信息。

如果您认为无法使用浏览器开发人员工具(Developer Tools)，并且在线工具更适合您，那么其中有几个可以很好地工作。

阅读下一篇(Read next)：如何找到付费字体的类似免费替代品(find similar free alternatives to paid Fonts)。



旭 郭

About the author

电话是人们可以拥有和使用的最通用的工具之一。它允许人们与他人交流、访问互联网以及做很多其他事情。使用 iPhone 或 Android 设备，您甚至可以观看视频和下载音乐。手机也非常适合拍照、上网、听音乐等。


Related posts