Javascript 找出使用的字体

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

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

---

我的问题是，有没有办法找出我的页面正在使用哪些字体以及选择过程是什么？

在浏览器中，在该页面上，点击F12。您应该看到CSS的一个部分。不过，您要查找的内容完全取决于您的浏览器。

浏览器将按照您放置字体的顺序呈现字体。例如，在您的代码中，第一个要尝试的字体是Georgia，然后如果设备或浏览器不支持它，它将继续尝试Garamond，最后它将使用浏览器和设备可以支持的任何serif字体

CSS定义了一个名为font family的属性，该属性包含一个有序的 字体列表。这些字体应该按顺序进行试验，看起来 无论是字体本身的可用性，还是 用于绘制当前文本的图示符

浏览器在Chrome中使用的字体点击Crtl+Shift+I，如果单击下面样式下html中的元素，它将显示页面上呈现的样式

要使用javascript获取渲染元素，请参见

---

开发工具

打开开发工具并查找计算样式，您可以看到应用了哪些样式以及在哪里…包括字体

• 铬：
• Firefox:

字体是使用

字体系列

属性定义的。您的浏览器将查看此字体列表，从第一个开始（从左向右移动），并检查字体是否在用户计算机上可用，或通过

@font-face

查看规则。如果找到字体，它将加载该字体，如果找不到，它将转到下一个字体再试一次

使用JavaScript获取计算字体

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

见MDN

试试这个

它将获得将在

样式中使用的字体名称

//使用id
var b=document.getElementById（“p”）.style.fontFamily；
控制台日志（b）；
//或者使用jquery标记选择器
console.log（$（“p”）.css（'fontFamily'）

OP可能希望使用JavaScript找到这些信息，以便在应用程序中以某种方式使用这些信息。此外，F12只在Internet Explorer中工作-例如Mac上的Chrome是Cmd+Shift+II，我生病时可能不应该回答问题。哈哈，但F12在Chrome上对我来说很好。啊，这是一个很好的消磨时间的方式：P也许F12在Windows上的Chrome上可以工作-我不知道。F12在大多数独立于操作系统的浏览器上都可以工作。CTRL+SHIFT+I与只按F12相同。@点击图标以及如何确定使用了哪些指定的浏览器？这并没有回答问题。编辑它是为了提供如何在JS和chromeIt中执行此操作的信息。它仍然不能回答问题，因为如果运行
window.getComputedStyle（document.querySelector（“p”）[“font family”]
对于OP的代码，它将返回整个数组
georgia、garamond、serif
，而不是呈现的字体名称！Vadim Ovchinnikov是对的。它显示了所有字体系列。我也使用了其他方法。但它给出了相同的结果。你能更精确一点吗？@FattySalamiyes它在那里。在inspector中的渲染样式下。这是一个很好的解决方案，但我能使用javascript动态找到它吗？请查看。它回答了你问的同一个问题。可能与这里的重复，在中有一些更有用的答案it@SimplyComplexable不，不是复制品，这个问题是关于特定元素而不是整个页面。你能澄清一下你想要特定元素的JavaScript字体检测，或者你需要一些浏览器工具检测吗？正如Difster回答中提到的，我认为这可能是关于使用JavaScript动态检测字体的问题。你是对的Kenneth。我想动态地找出正在使用的字体。对不起，Bhargav。我不想使用任何第三方库。如果您能提供一些香草的，我将不胜感激