找出使用了哪个字体

Question

找出使用了哪个字体

5

我有一个带内联样式的段落，如下所示：

<p style="font-family:georgia,garamond,serif;">

有没有一种方法可以找出我的页面正在使用哪种字体，以及选择过程是什么？

- Mozmith

请查看此链接，它回答了你所问的同样问题。 - SimplyComplexable

2

可能是检测网页中使用的字体的重复问题。 - SimplyComplexable

这里有另一个，其中包含更多有用的答案。 - Toastrackenigma

1

请问您是想要针对特定元素进行一些JavaScript字体检测，还是需要一些浏览器工具检测的功能？ - Vadim Ovchinnikov

我删除了我的帖子，因为发现它不可靠。 - Vadim Ovchinnikov

显示剩余3条评论

4个回答

1

在您的浏览器中打开该页面后，按下F12。您应该会看到一个CSS部分。但具体查找位置取决于您使用的浏览器。

- Difster

1

OP可能想使用JavaScript来查找这些信息，以便在应用程序中以某种方式使用它。此外，F12仅适用于Internet Explorer - 例如，在Mac上使用Chrome是Cmd + Shift + I。 - Toastrackenigma

我生病时可能不应该回答问题。哈哈，但是在Chrome中F12对我来说完全没问题。 - Difster

啊，虽然这是一个很好的消磨时间的方式 :P 也许在Windows上Chrome上按F12键可以用 - 我不知道。 - Toastrackenigma

F12在大多数浏览器上都可以使用，与您的操作系统无关。CTRL+SHIFT+I与仅按F12相同。@Toastrackenigma - Mozmith

1

浏览器将按照你放置字体的顺序进行渲染。例如，在您的代码中，将首先尝试使用Georgia字体，然后如果设备或浏览器不支持它，将尝试使用Garamond字体，最后将使用浏览器和设备支持的任何衬线字体。

CSS定义了一个名为font-family的属性，其中包含一个有序的字体列表。这些字体应该按顺序尝试，同时查找字体本身的可用性以及绘制当前文本所需的字形的可用性。1

要查看Chrome浏览器使用的字体，请按Crtl + Shift + I，如果您在下面的HTML元素中单击样式，则会显示页面上正在呈现的样式。

要使用javascript获取呈现的元素，请参见this answer

文章解释浏览器的字体选择

- mep

1

如何确定使用了指定的内容？这并没有回答问题。 - Vadim Ovchinnikov

编辑了一下，提供如何在JS和Chrome中实现的信息。 - mep

它仍然没有回答问题，因为如果你在OP的代码中运行window.getComputedStyle(document.querySelector("p"))["font-family"]，它将返回整个数组georgia,garamond,serif，而不是渲染的字体名称！ - Vadim Ovchinnikov

Vadim Ovchinnikov是正确的。它显示了所有的字体系列。我也使用了其他方法，但结果相同。你能再精确一点吗？@FattySalami - Mozmith

是的，它在检查器中的渲染样式下面。这是一个不错的解决方案，但我能否使用JavaScript动态查找它呢？ - Mozmith

显示剩余2条评论

0

试试这个

它会获取在 style 中使用的字体名称

//using id

var b = document.getElementById("p").style.fontFamily;
console.log(b);

//or using jquery tag selecter

console.log($("p").css('fontFamily'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p" style="font-family:georgia,garamond,serif;">

- Bhargav Chudasama

对不起，Bhargav。我不想使用任何第三方库。如果您能提供原生的解决方案，我将不胜感激。 - Mozmith

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kenneth Stoddard · Accepted Answer

开发工具

打开开发工具并查找计算样式，您可以看到应用了哪些样式以及它们的位置...包括字体。

使用font-family属性定义字体。您的浏览器将查看此字体列表，从左到右开始（逐个检查），并检查字体是否可用于用户计算机或通过@font-face规则。如果找到该字体，则加载它，否则，继续尝试下一个。

使用JavaScript获取计算字体

var el = document.getElementById("id");
var style = window.getComputedStyle(el, null).getPropertyValue("font-family");

JSFiddle

查看MDN...