chrome 使用特殊字体_使用Google Chrome检查字体家族

在网站的单个页面上使用多种字体是一种相当普遍的做法。 例如，我们可以编写以下内容： font-family: Times New Roman, Georgia CSS规则中的font-family: Times New Roman, Georgia 。

该字体家族是浏览器建议使用哪种字体的建议–如果第一个选择失败，则使用下一个，依此类推。 但是，我们如何确切知道浏览器实际使用的是哪种字体 ？ 我们可以安装扩展程序来完成这项工作，但是Google Chrome浏览器具有更准确的内置功能。

在撰写本文时，此功能仅在Chrome Canary中提供，但不适用于常规Chrome。 在此处下载Chrome Canary，然后将其安装在计算机上。 现在，让我们直接看一下它是如何工作的。

如何

在这个例子中，我们有一个相当标准的文本块，它由几个段落和标题组成。 在CSS规则中，我们设置了一些通用字体系列，如下所示。

h3, h4 {
	font-family: Verdana, Geneva, sans-serif;
}
.demo-wrapper p {
	font-family: Georgia, serif;
}

现在，在Chrome Canary DevTools中，转到“ 计算”选项卡。 滚动到底部，您将找到确切的字体系列以及用于所选元素的字形总和（请参见下面的屏幕截图）。

即使只指定字体（ serif和sans-serif ）而不指定字体系列，它仍然可以告诉我们页面上正在呈现哪种字体（请参见下面的屏幕截图）。

除此之外，我们还可以看到在伪元素中指定的字体系列以及@font-face提供的@font-face 。 这是一个例子：

结论

Chrome中的这个新工具绝对适合Web开发人员使用 。 现在，我们可以轻松查看正在使用的字体以及显示的字形的总和。 此工具还可以与某些Webfont服务（例如Typekit和Google Web Font）一起很好地使用。

希望本教程对您有所帮助，特别感谢Paul Irish 揭示了该功能 。

翻译自: https://www.hongkiat.com/blog/inspecting-font-family-with-google-chrome/