如果您偶然发现想要采用的字体,查找该字体信息的常用方法是使用 Chrome浏览器中的“检查元素”选项。
基本上,在Chrome上,我们突出显示文本并右键单击以选择Inspect Element 。 然后,我们可以看到与突出显示的文本相关的所有CSS代码。
![](https://i-blog.csdnimg.cn/blog_migrate/d4f2043d3fc60a0f47047d12ecb07ade.png)
![](https://i-blog.csdnimg.cn/blog_migrate/83b68bb77495f460e17af6718ca77c47.png)
不过有一个问题。 正如您在第二张图片中所看到的,突出显示的文本使用许多选择器进行样式设置。 要一一检查所有这些,将需要一些时间。
使用Fontface Ninja检测字体
这是Fontface Ninja出现的地方。它是一个浏览器扩展,可以帮助您通过名称识别字体。 您所要做的就是将鼠标悬停在所需的字体上。除了字体名称之外,Fontface Ninja还为您提供大小和行距 。
![](https://i-blog.csdnimg.cn/blog_migrate/ef070e3fda061ca6f24f83c3f9ac1f12.png)
您可能会发现方便的Fontface Ninja的另一个功能是隐藏图片和广告的功能,因此您可以专注于字体而不会造成干扰。 该插件还允许您尝试一种字体,以及是否愿意购买或下载该字体。
安装Fontface Ninja
您可以下载Fontface Ninja,以在您选择的浏览器中使用。
使用Fontface Ninja
安装后,将在浏览器地址栏附近显示一个跳跃忍者的应用程序图标。 单击它以将其激活。 现在,您可以将鼠标悬停在网页上的任何文本上,以获取显示有关字体信息的工具提示。
要尝试使用该字体, 请单击它 ,然后FontFace Ninja徽标将移至左侧,为您提供输入和尝试所选字体的空间。 您还可以调整字体的大小 。
![](https://i-blog.csdnimg.cn/blog_migrate/b0205d9b3bf2e66a1bdf3b60f82ac9ca.png)
要隐藏所有图像,以便您可以将注意力集中在版式上,请单击“ 关闭”旁边的“ 遮罩”选项。 所有detect-font-fontface-ninja /都将隐藏起来。
![](https://i-blog.csdnimg.cn/blog_migrate/ec898eebb51701b92e48b03f41f24850.png)
相关–浏览器上的实时测试字体
如果您喜欢Fontface Ninja,您可能会喜欢Font Dragr 。 我们之前曾写过这是一种方便的工具,它可以通过将字体拖入网页本身来帮助像您这样的开发人员在浏览器上实时测试字体。
进一步了解如何使用Font Dragr对字体进行实时测试 。
翻译自: https://www.hongkiat.com/blog/detect-font-fontface-ninja/