如何确定从javascript中使用的实际字体[重复]

Question

从this answer 开始，可以通过 Chrome 的开发工具检查渲染的字体。但是我们如何才能直接从 JavaScript 中获取这些信息呢？

例如，我想创建一个网页，显示该页面上实际呈现的字体。

Answer 1

我认为这个功能会起作用

var div = document.getElementById( 'show' );

function showCSS( element, property ) {
    return window.getComputedStyle( element, null ).getPropertyValue( property );
}

let fontName = showCSS( div, 'font-family' );
var para = document.createElement("p");
var node = document.createTextNode('Font Name: ' + fontName);
para.appendChild(node);

var element = document.getElementById("fontName");
element.appendChild(para)

div {
 font-family: Arial
}

<div id="show">Text: Show Font Name</div>
<div id="fontName"></div>