HTML5 Canvas 文本中支持的字体

Question

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

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

除了“Arial”之外，不包括任何其他字体，我还有哪些其他选项？

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

canvas

元素。

Answer 1

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

根据 WHATWG 的 HTML Living Standard，Canvas API 允许使用用户代理可以通过 CSS 样式表使用的任何字体，这一事实从链接规范中的以下段落中可以明显看出：

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

如果你问我，从上面可以得出，用户代理可用的所有字体以及它可以根据 CSS 字体加载 和 CSS 字体嵌入 规范下载和使用的任何字体都可以使用。所以，是的，Canvas API 确实使用了 CSS 字体嵌入。

我只想要一个大多数浏览器都支持的 html 画布字体列表。

保存嵌入字体，没有这样的列表，因为没有 Web API 枚举用户系统上可用的字体，所以这里只剩下通配符。

有“网络安全字体”的概念，但它不是一个明确的列表，据我所知也没有标准化。它只是所有字体中最常见的已知子集，所有用户代理最有可能可以在字体与原始字体相似的情况下呈现。例如，用户代理所引用的“Webdings”字体可以从 Microsoft Windows 上的 Webdings TrueType 字体以及基于 Linux 的操作系统上的其他字体加载，其中两者将被设计为近似相同的外观，例如，其中字形 N 是蝙蝠的图片，但它不必是“完全相同”的图像。实际文本字体的情况也是如此——衬线字体将保持衬线，哥特式将保持哥特式，依此类推。 用户代理和/或其运行的平台甚至可以方便地将常用字体名称（如“Arial”（或“Webdings”，如上面的示例））映射到它拥有的字体，否则它不可用

类似于 Arial 字形，但它完全由软件堆栈决定。

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

如果您正在使用 Web API 和 JavaScript 编写绘图应用程序，并且绝对希望包含

system

字体，则可以使用文本输入框，用户可以在其中键入他们想要使用的字体 - 因为您无权访问对于字体集，菜单是不合适的，尽管您可以使用

datalist 元素向用户提供一些流行的建议（例如“Arial”、“Helvetica”、“Georgia”等）。如果他们输入的字体可用，用户代理将能够使用它。

郑重声明，嵌入

“已知”字体（如 Arial、Helvetica、Georgia 等）也没有任何问题，这样您就可以获得更好的渲染一致性（在用户代理、他们依赖的平台之间）。这不是常规网页所需要的，但如果您的主要功能是以一致的方式绘制和复制文本，则字体嵌入看起来是必须具备的。

网络安全字体列表：

Answer 2

Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

https://www.w3schools.com/cssref/css_websafe_fonts.php

您可以使用它们来设置css.font

，如下所示：

ctx.font = "32px trebuchet ms"

请注意它不区分大小写，并且您确实包含了空格。