I have tested it without linking any fonts in the HTML, then linked Roboto font, tested again and it got added to the result.Ĭhris 在 19:58:01 回答:FontFaceSet.check() solutionĭetecting all available fonts is common browser fingerprinting technique so it is unlikely any JS API will ever be added which will directly return a list.įontFaceSet.check() support is good enough to be used but will need a fallback e.g. converted to set then arr to filter repetitive values Returned values are verbose with weight, style, etc. The FontFaceSet interface is useful for loading new fonts, checking the status of previously loaded fonts, etc. The returned value is the FontFaceSet interface of the document. There is a way to do this using document.fonts Width and height for the same string of characters of same font-size. This code works on the simple principle that each character appearsĭifferently in different fonts. Var matched = (s.offsetWidth != defaultWidth] || s.offsetHeight != defaultHeight]) S.style.fontFamily = font + ',' + baseFonts // name of the font along with the base font for fallback. get the default width for the three base fontsĭefaultWidth] = s.offsetWidth //width for the default fontĭefaultHeight] = s.offsetHeight //height for the defualt font create a SPAN in the document to get the width of the text we use to test Var h = document.getElementsByTagName("body") we test using 72px font size, we may use any size. And we use a LLi so that the same matching fonts can get separated we use m or w because these two characters take up the maximum width. and if it doesn't match all 3 then that font is not available. a font will be compared against all the three default fonts. * Replaced sans with serif in the list of baseFonts * then that font is 100% not available in the system * Comparing font against all the 3 generic font families ie, * to parent element if the font is missing. * as in FF3.0 font of child element didn't fallback * Changed comparision font to default from sans-default-default, * particular font in a browser using JavaScript and CSS. * JavaScript code to detect available availability of a Yes there is! I'm so glad you asked this question because I now want to use this too.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |