如何查看容器内字体是否安装成功

如果您偶然发现想要采用的字体，查找该字体信息的常用方法是使用 Chrome浏览器中的“检查元素”选项。

基本上，在Chrome上，我们突出显示文本并右键单击以选择Inspect Element 。 然后，我们可以看到与突出显示的文本相关的所有CSS代码。

<div> 
    <img src="https://s2.51cto.com/images/blog/202407/09233103_668d57b7950c467872.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">
</div>

<div> 
    <img src="https://s2.51cto.com/images/blog/202407/09233104_668d57b82826955536.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">
</div>

不过有一个问题。 正如您在第二张图片中所看到的，突出显示的文本使用许多选择器进行样式设置。 要一一检查所有这些，将需要一些时间。

使用Fontface Ninja检测字体

这是Fontface Ninja出现的地方。它是一个浏览器扩展，可以帮助您通过名称识别字体。 您所要做的就是将鼠标悬停在所需的字体上。除了字体名称之外，Fontface Ninja还为您提供大小和行距 。

<div>

<img src="https://s2.51cto.com/images/blog/202407/09233104_668d57b8bdf5d21941.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">
</div>

您可能会发现方便的Fontface Ninja的另一个功能是隐藏图片和广告的功能，因此您可以专注于字体而不会造成干扰。 该插件还允许您尝试一种字体，以及是否愿意购买或下载该字体。

安装Fontface Ninja

您可以下载Fontface Ninja，以在您选择的浏览器中使用。

• Chrome
• 苹果浏览器

使用Fontface Ninja

安装后，将在浏览器地址栏附近显示一个跳跃忍者的应用程序图标。 单击它以将其激活。 现在，您可以将鼠标悬停在网页上的任何文本上，以获取显示有关字体信息的工具提示。

要尝试使用该字体， 请单击它 ，然后FontFace Ninja徽标将移至左侧，为您提供输入和尝试所选字体的空间。 您还可以调整字体的大小 。

<div>     <img src="https://s2.51cto.com/images/blog/202407/09233105_668d57b93ceb218039.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">

</div>

要隐藏所有图像，以便您可以将注意力集中在版式上，请单击“ 关闭”旁边的“ 遮罩”选项。 所有detect-font-fontface-ninja /都将隐藏起来。

<div>     <img src="https://s2.51cto.com/images/blog/202407/09233105_668d57b9b3afd93539.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt=""></div>