如何知道网站使用什么字体

如果您曾经看过一个特别吸引人的网站，并且想知道如何查看网站使用的字体，答案就像打开浏览器的检查器一样简单。 网站的每一点都在您的浏览器中进行解释。 因此，如果您知道如何正确使用浏览器检查器，您不仅可以找到来源，还可以找到它所拥有的图像、页面上任何其他元素的 CSS 属性。

在这篇文章中，我们将了解如何使用 Chrome 浏览器检查器来查找网站使用的字体，以及如何开始使用它们。 但首先，我将解释如何访问它以及检查器中可用的功能。

访问 Chrome 检查器

如果您使用 Chrome 浏览器并想要检查网站，您应该做的第一件事是访问检查器窗口。 做这件事有很多种方法：

• 按 F12 键，或
• 通过右键单击某个项目并在打开的菜单中，访问“ Inspect ”选项。 这种方法的优点是它直接突出了有问题的元素，或者
• 通过按组合键Control + Shift + I （在 Windows 上）或Cmd + Alt + I （在 Mac 上），或
• 通过访问 Chrome 菜单（右上角的 3 个点）»更多工具»开发人员工具。

检查器窗口可以显示在浏览器窗口本身中，也可以显示在单独的窗口中。 要访问这些选项，您可以通过单击检查器右上角的配置图标（3 个点）并更改属性 «Dock Side» 的值来实现。

您还可以选择以计算机查看模式查看页面内容，或者就像在移动设备上查看一样。 单击检查器顶部栏左侧的第二个按钮，您将看到内容将如何自动显示，就像您从移动设备访问它一样。

您还可以指明要在其上显示的设备类型、尺寸或是否要以纵向或横向模式显示。

检查器主选项卡

您可能已经看到，检查器由不同的选项卡组成。

从他们每个人中，您都可以访问不同的功能和特性：

• Elements ：显示页面的 HTML 代码，以及应用的样式。 您还可以修改它们并快速添加新规则。
• 控制台：显示页面上出现的不同错误和警告消息（未加载的图像、javascript 错误……）
• Sources ：显示页面的资源树。 您可以查看不同资源的获取位置并对其进行修改。
• 网络：显示从网站发出的不同请求、访问请求的内容、获得的响应、次数……
• 性能：显示正在运行的进程并用于衡量页面的性能。
• 内存：显示网页加载和执行过程中消耗的内存。
• 应用程序：显示有关 Web 应用程序使用的资源的有用信息。
• 安全性：显示有关从页面访问的不同站点及其各自证书的信息。
• 审计：允许您生成审计报告以检查错误。
• 有些插件可以向检查器添加选项卡和功能，因此可能会有更多选项卡。 在上图中，显示我们已经安装了Redux DevTools插件。

元素选项卡

现在让我们回到手头的问题：我们想知道网页上任何内容的字体。

正如我之前提到的，从“元素”选项卡中，您可以访问 HTML 代码以及您所在页面上不同元素的样式。

如上图所示，左侧是显示源代码的主窗口。 在右侧，您可以看到应用于页面不同元素的 CSS 样式规则面板。

实际上，在样式面板中，您有三个选项卡：

• 样式：显示应用的 CSS 规则，您可以修改和添加新规则。
• Computed ：显示应用于元素的所有规则，面板表示元素的边框、边距和填充。
• 事件监听器：显示页面上已启动的事件树以及受它们影响的控件。

查看项目的详细信息

因此，例如，如果您转到我们的 Nelio Software 主页，从标题中选择Nelio Software 一词并右键单击以检查项目是什么，检查器将打开并显示上图。

在检查器图像中，您可以看到主窗口告诉我标题样式“Nelio Software”是h1 。

在同一窗口中，您可以选择右键单击任何属性或文本并修改或删除它。 显然，您在此处所做的任何更改都不会更改原始内容，但是当您设计页面并且想要了解所做的任何更改的外观时，它恰恰是一个非常有用的工具。

查看字体

现在您知道它是标题，但是字体呢？

好吧，很简单，在检查器的Computed选项卡中，您将找到所选项目的所有属性。 向下滚动到font-family属性，您将在那里找到具有我们网站标题的确切字体。

如果您想更改字体时该元素的外观，您可以转到Styles选项卡，进入font-family属性，您可以直接使用所需的值对其进行修改。

您将自动看到您的网站更改了字体类型

如您所见，Google Chrome 检查器是一个非常舒适且易于使用的工具，可用于玩转和尝试对元素进行任何修改后留下的设计。

图像的字体怎么样？

如您所见，Google Chrome 检查器可让您查看页面上任何元素的属性。 但是，如果您想在网站上看到图像的字体，您将无法通过检查器看到它。 检查器将向您显示插入页面中的图像的属性，但不会向您显示该图像内容的详细信息。

为此，有一些工具，例如 Font Squirrel Matcherator 或 Whatfontis.com，可以帮助您识别图像中使用的字体。 为此，您必须在这两个工具中下载图像（在 whatfontis.com，您还可以指明图像的 URL），然后选择包含您要识别的字母的图像部分。

这两个工具都会向您显示与所选文本大致匹配的一整套字体。 但是，如果您怀疑这不是完全匹配，您可以在谷歌上搜索与该工具指示的字体相似的字体，您将看到您得到的结果。

杰玛·埃文斯 (Gemma Evans) 在 Unsplash 上的特色图片。