使用技巧

如何从网站中识别字体

识别网站上的字体-特色图片

您是否曾经在其他网站,图片或博客上找到适合您网站的理想字体,却不知道如何找到它的名称? 您来对地方了。 在本指南中,我们将向您展示如何从网站上识别字体,以帮助您找到适合您业务的理想字体。

为什么查看网站使用什么字体有用?

如果您正在构建网站或设计在线内容,则总是在寻找改进它的方法。 您可以通过多种方式做到这一点。 最明显的是使用不同的主题,添加功能并提供更好的内容。 但是,您还可以做其他不太明显的事情,以在竞争者中占优势,并使您的网站独特。 字体是其中之一。

您使用的字体遍布您的整个站点,不仅可以提高可读性,而且可以改善整体导航。 如果您的排版看起来很专业并且易于阅读,则访问者更有可能留在您的网站上。 字体通常被忽略,但是会对您的网站产生很大的影响。

即使可以在网站上添加字体,您也可能希望使用传统方式无法找到的字体。 互联网上到处都是带有美丽排版的网站,您可能希望在网站上使用它们。 但是,困难的部分是识别那些网站使用的字体。 没有找到字体的简便方法,即使您是专家,每种字体也有很多微小的差异。 此外,可以通过字体样式和CSS更改来放大这些差异。

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

如何从网站中识别字体

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

  1. 使用检查工具
  2. 带插件
    1. FFFFallback
    2. 源头
    3. 丰塔内洛
    4. 什么字体

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

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

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

  • 在浏览器上按F12或Ctrl + Shift + I
  • 右键单击打开浏览器菜单,然后转到检查
  • 从浏览器菜单中打开“开发人员工具”选项,然后转到“ Web开发人员”

找到所需字体后,右键单击包含要识别的字体的文本,然后单击“检查元素”。

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

然后,单击“计算”选项卡并向下滚动以检查“字体系列”字段。 此字段应列出网站的字体。 例如,在此示例中,字体是Roboto或SF-Pro Display。

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

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

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

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

2.1) FFFFall返回

识别网站上的字体-FFallback

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

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

识别网站上的字体-FFFFallback

现在,打开一个您要标识其字体的网站,然后单击刚刚保存在“书签”栏中的“书签”。 它将在新列上向您显示网站的字体系列和样式,如下所示。 确保选择“ Web字体”作为顶部的选项。

识别网站上的字体-FFFFallback

2.2)基金会

识别网站上的字体-字体

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

要使用Fount,请转到 这个网站 并将其拖到“书签”标签中,以从其网站保存该书签。

识别网站上的字体-书签

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

识别网站上的字体-字体选择器

知道该文本的字体后,您可以再次单击“字体”框以禁用光标并继续照常浏览页面。

2.3)丰塔内洛

识别网站上的字体-Fontanello图像

如果您更喜欢使用浏览器扩展,Fontanello是您从任何网站识别字体的理想工具。 只需在以下位置安装Fontanello扩展程序 铬合金 或者 火狐浏览器 并激活它。

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

识别网站上的字体-Fontanello右键单击

2.4)什么字体

识别网站上的字体-whatfont网站

另外,您可以以类似方式使用WhatFont扩展名。 首先,在任一扩展上安装扩展 铬合金 或者 火狐浏览器。 然后,单击浏览器工具栏上的WhatFont工具图标,然后单击任何文本以检查其字体。 好消息是,您可以选择不同的文本,并查看它们同时使用什么字体。

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

识别网站上的字体-有什么用

既然我们已经了解了如何从文本中识别字体,您可能想知道是否可以从图像中进行相同的操作。 答案是肯定的! 让我们看看如何做到这一点。

如何从图像中识别字体

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

什么字体

识别网站上的字体-什么是字体网站

使用此在线工具,您可以上传任何图像,分析图像文本并告诉您所使用的字体。

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

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

识别网站上的字体-whatthefont图片

总结

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

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

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

找到正确的字体后,由您自己决定如何将它们添加到您的网站。 一旦选择了要使用的字体,我们建议您看看我们的指南,该指南介绍了如何立即更改WordPress中的字体以切换到新字体。

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

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