开发者

How to iterate the installed fonts using javascript? [duplicate]

开发者 https://www.devze.com 2023-01-13 20:57 出处:网络
This question already has answers here: list every font a user's browser can display (12 answers) Closed 5 years ago.
This question already has answers here: list every font a user's browser can display (12 answers) Closed 5 years ago. 开发者_开发百科

How to iterate the installed fonts using javascript?


To start off, you might want to check what fonts are installed on the client. Read up on https://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js?ver=0.3

You need to have your own list of fonts to check, then you have an array of installed fonts by checking each of the list to see which one is installed.

The difference in widths will tell you the availability of the fonts installed on the client's computers because the browser will fall back to its default font. So you probably need to do some invisible testing for text widths to determine if a font is installed.


Javascript's sandboxed inside the browser and doesn't have privileges to read from the clients disk for security reasons.

However people tried making some workarounds like http://www.lalit.org/lab/javascript-css-font-detect or http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/.


This code works for IE

<html>
<head>
    <script type="text/javascript">
    <!--
        function getFonts() {

            // get list of fonts, and sort alphabetically
            var allFonts = [];
            for (var loop = 1; loop < dlgHelper.fonts.count + 1; loop++) allFonts[loop - 1] = dlgHelper.fonts(loop);
            allFonts.sort();

            // create output list, and include samples of each font
            var outputStr = '';
            var fontTestString = 'ABC abc 123';
            for (var loop = 0; loop < allFonts.length; loop++) {
                outputStr += '<span style="font-family: ' + allFonts[loop] + ';">' + allFonts[loop] + '</span><br />\n';
            }
            document.getElementById('fontList').innerHTML = outputStr;
        }
     //-->
    </script>
</head>
<body onload="getFonts();">
    <object id="dlgHelper" classid="clsid:3050F819-98B5-11CF-BB82-00AA00BDCE0B" width="0px"
        height="0px">
    </object>
    <div id="fontList">
    </div>
</body>
</html>


There's not a way that I'm aware of. There are system APIs in languages like C++ and Python that will return the installed fonts, and you can certainly write a backend in a higher level language that communicates with a JavaScript front end using get/post requests and (optionally) AJAX, but you're not going to get the installed fonts with only JavaScript.

0

精彩评论

暂无评论...
验证码 换一张
取 消