如何确定从JavaScript使用的实际字体

Question

在the npm docs中，可以通过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>