HTML5 Canvas文本中支持的字体

Question

使用HTML Canvas API，我们可以使用选定的字体绘制文本：

var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = '20px Arial';

除了“ Arial”外，我还有什么其他选择，不包括任何其他字体？

我不想使用脚本来检测字体。我只是想要一个字体列表，如果不是全部的话，那么至少对于HTML canvas元素来说，至少是大多数浏览器都支持。

Answer 1

在不包括任何其他字体的情况下，我可以代替Arial放置哪些其他选项？

按照HTML生活水平由WHATWG，画布API允许使用否则可通过使用CSS样式表的用户代理可以使用任何字体，这其实是从连接规范，以下段落明显等等：

使用字体时，字体系列名称必须在字体样式源对象的上下文中进行解释。因此，一旦使用字体样式源对象可见的使用@ font-face嵌入的字体或使用FontFace对象加载的任何字体，都必须可用。

因此，这包括用户计算机上可用的所有字体，并且对于大多数现代用户代理而言，它还可以根据CSS字体加载和CSS字体嵌入规范下载和使用的任何字体。是的，甚至Canvas API也使用CSS字体嵌入，这从上面链接的Canvas API规范可以明显看出。

我只想列出不是大多数HTML画布浏览器都支持的字体列表。

除嵌入式字体外，没有这样的列表，因为没有Web API枚举用户在其系统上可以使用的字体，因此这里只剩下一个通配符。

有“ Web安全字体”的概念，但这不是一个确定的列表，据我所知还没有标准化。它只是所有用户代理最有可能在字体类似于原始字体的位置呈现的所有字体中最常见的子集。例如，用户代理所指的“ Webdings”字体可能是从Microsoft Windows以及其他基于Linux的操作系统上的Webdings TrueType字体加载的，在这两种情况下，两者的外观应近似相同，例如，其中字形N将是蝙蝠的图片，但不必完全相同。实际文本字体的样式也是如此-衬线字体将保持衬线，哥特式将保持哥特式，依此类推。

用户代理和/或运行于其上的平台甚至可以方便地将本来就不可用的常见字体名称（例如“ Arial”（或“ Webdings”，如上述示例））映射到其具有可用类似于Arial字形，但完全由整个软件堆栈决定。

如果您的实际目标是可靠地绘制带有已知轮廓的文本，则最好使用字体嵌入技术。

如果您要使用Web API和JavaScript编写绘图应用程序，并且绝对希望包含系统字体，则可以使用文本输入框，用户可以在其中输入他们希望使用的字体-因为您无权访问该字体设置菜单是不合适的，尽管您可以借助datalist元素为用户提供一些受欢迎的建议（例如“ Arial”，“ Helvetica”，“ Georgia”等）。如果他们输入的字体可用，则用户代理将可以使用它。但在这里，使用嵌入字体列表通常可能是一个更好的主意。