How to iterate the installed fonts using javascript? [duplicate]
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.
加载中,请稍侯......
精彩评论