Issue #218 (Computed Font, CSS/HTML, JS Libs, Productivity)09/21/17
You're likely familiar with window.getComputedStyle(), which is an easy way to get the computed value of a specific CSS property. That method, however, has its flaws.
For example, if you try to get the computed value of the font-family property for a specific element, you'll just get whatever font stack is defined.
|
console.log(
window.getComputedStyle( document.body )
.getPropertyValue( 'font-family' )
);
// "Arial, Helvetica, sans-serif"
|
That's not bad, but this doesn't actually tell you which font is being rendered on the page.
If you want to know the font for debugging purposes, you can see what font is rendered inside your browser's developer tools.
In Chrome:
- Right click the text, then choose "Inspect"
- In the right pane select the "Computed" tab
- Scroll down to the bottom of the "Computed" tab (you might have to drill down into the element to select the text node itself)
- You should see the "Rendered Fonts" section of the "Computed" tab. See this screenshot for an example.
In Firefox, it's almost the same:
- Right click text, choose "Inspect Element"
- Choose the "Fonts" tab (instead of "Computed")
- See this screenshot
Again, this is useful for debugging purposes and for examining fonts on other websites, but as far as reading the rendered font with JavaScript, I couldn't find an easy solution.
There's
this utility, which I haven't tried yet but might do the job. There's also the possibility to use the Canvas API to check for the size of the rendered text and then determine it that way. But from the code I've seen, it looks like that's a pretty complex solution.
This Chrome extension actually uses Canvas to do this, so it seems like Canvas is the only way.
If you know of another way, feel free to respond to this email and let me know.
Now on to this week's tools!
