This is a followup to this question.
I am working on a component for the CKEditor, a tweaked version of the font drop-down menus that always display the currently selected font family / size values, no matter where they were defined, using computedStyle and consorts.
As you can see in the other question, determining the font size works cross-browser now. Now I am having trouble working with the fontFamily attribute. My generic "computed style" function returns only the full font string that was defined, e.g.
Times New Roman, Georgia, Serif
What I need, in order to match the setting against the entries in the font family dropdown, is a fixed font name of the actual font of the DOM element I am checking.
Can this be done somehow, at least for the most common web fonts?
I don’t think there are any methods to do it directly, but Lalit Patel came up with a clever technique that creates an element with some letters in it, and guesses the font from the width of the element.
The UA picks the first font in the list that it finds installed. The fonts installed on the OS are not really a part of the DOM, so the best you can do is guess.
来源：https://stackoverflow.com/questions/1960817/get-computed-font-family-in-javascript