列出用户浏览器可以显示的所有字体

Question

133

在JavaScript中有没有一种方法可以获取浏览器能够显示的所有字体（或字体系列）的名称？（我想给用户一个下拉菜单，列出所有可用的字体，并允许用户选择一个字体。）我不想预先硬编码此列表或从服务器发送它。（直观地看，浏览器应该知道它拥有哪些字体，并且这应该以某种方式暴露给JavaScript。）

- mattsh

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fzzylogic · Answer 1

也许可以用完全不同的方式来完成，使用已知字体图像的精灵表格来绘制特定字符，并将其与在画布元素上绘制相同字符并使用浏览器报告为相同字体的快照进行比较。可以使用类似resemble.js的工具进行比较。

这种方法会慢一些，但也应该能够检测出浏览器欺骗的情况。

- AFF · Answer 2

我最近注意到，如果我为HTML5画布设置context.font值为无效值，例如“junk”，则画布会忽略更改。我不知道这是否是特定于浏览器的，但在Chrome上似乎是这样工作的。我还看到其他帖子（HTML 5 canvas font being ignored）表明它也发生在其他浏览器中。

然后，您可以使用默认值写出一个字符串，我相信默认值是“10px sans serif”（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font），将字体设置为要测试的字体并再次写入字符串。如果与第一次绘制相同，则该字体不可用。