1

From this answer, the rendered fonts can be inspected via Chrome's Dev Tools. But how can we get these info directly from the JavaScript?

For example, I want to create a webpage, which shows the actual rendered fonts on this page.

stone-zeng
  • 261
  • 3
  • 11
  • Sorry, but how does your question differ from [the one you linked to](https://stackoverflow.com/q/7444451/3702797)? – Kaiido May 29 '19 at 03:53
  • 1
    Note that the "correct" answer would be https://stackoverflow.com/a/13845553/3702797 and that one of the ways to "guess" it is [exposed here](https://stackoverflow.com/a/38910481/3702797) – Kaiido May 29 '19 at 03:59
  • What I want is to retrieve the value that obtained by chrome. The answers here can't give the same result as chrome dev tools. The devtools protocol defines [PlatformFontUsage](https://chromedevtools.github.io/devtools-protocol/tot/CSS#type-PlatformFontUsage), but I don't know how to access it in a web page. – stone-zeng May 29 '19 at 05:38
  • 1
    This API is only accessible to extensions, not to web content. What you want is not possible. – Kaiido May 29 '19 at 06:00

1 Answers1

0

I think this function will work 

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>
tnkh
  • 1,749
  • 2
  • 14
  • 30
  • Then set it to `monospace` and you won't find `"Courrier New"` or whatever the real font is. And set the text content to "안녕" and it will still report "Arial" event though Arial doesn't have these two characters. – Kaiido May 29 '19 at 03:51