javascript - 计算机上的字体列表

Question

所以我有一个包含文本的 div，当您在我制作的选择列表中选择不同的字体时，它会发生变化。 目前列表非常有限，因为我必须自己添加字体。

有什么方法可以用代码将用户计算机上安装的所有字体添加到列表中，而不必自己全部添加？

HTML

<div id="generate">
       Change the text! 
</div>

<select id="box" onchange="font();">
    <option id="PIC" value="Kies een font">Kies een font.</option>
    <option id="TNR" value="TimesNewRoman">Times New Roman</option>
    <option id="GRG" value="Georgia">Georgia</option>
    <option id="PLT" value="PalatinoLinotype">Palatino Linotype</option>
    <option id="ARL" value="Arial">Arial</option>
    <option id="CMS" value="ComicSans">Comic Sans</option>
    <option id="IMP" value="Impact">Impact</option>
    <option id="TMS" value="TrebuchetMS">Trebuchet MS</option>
    <option id="TSB" value="TheSansBlack">The Sans Black Plain</option>
</select><br />

Javascript

 function font() {
        var sf = document.getElementById('box').value;
        var generate = document.getElementById('generate');

        switch(sf){
            case 'TimesNewRoman': 
                generate.style.fontFamily = ('Times New Roman')
                break;
            case 'Georgia': 
                generate.style.fontFamily = ('Georgia')
                break;
            case 'PalatinoLinotype': 
                generate.style.fontFamily = ('Palatino Linotype')
                break;
            case 'Arial': 
                generate.style.fontFamily = ('Arial')
                break;
            case 'ComicSans': 
                generate.style.fontFamily = ('Comic Sans MS')
                break;
            case 'Impact': 
                generate.style.fontFamily = ('Impact')
                break;
            case 'TrebuchetMS': 
                generate.style.fontFamily = ('Trebuchet MS')
                break;
            default: generate.style.fontFamily = ('')
            }
        }

Answer 1

您可以检查特定字体的可用性 http://www.lalit.org/lab/javascript-css-font-detect/

您可以做的一件事是创建自己的列表并按照上面的链接比较它的可用性，并仅显示客户端系统上可用的字体。