HTML5 Canvas 文本中支持的字体答案

【问题标题】：Supported fonts in HTML5 Canvas textHTML5 Canvas 文本中支持的字体
【发布时间】：2019-05-07 08:52:01
【问题描述】：

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

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

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

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

【问题讨论】：

客户端设备安装的字体是可用的，这可能不是那么容易从javascript中检测到。
与您可以从 css 中使用的完全相同，即任何，因为您可以从字体声明中加载它们。
我认为最好的方法是根据需要指定字体，但请确保添加网络安全标准作为备份。所以我会写font-family: Helvetica, Arial, sans-serif; Sans-serif 将始终有效，即使其他两个不存在。

标签： javascript html html5-canvas

【解决方案1】：

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

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

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

因此，这包括用户代理可用的所有字体以及它可以根据CSS font loading 和CSS font embedding 规范下载和使用的任何字体。所以是的，Canvas API 使用 CSS 字体嵌入。

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

除了嵌入字体，没有这样的列表，因为没有 Web API 可以枚举用户系统上可用的字体，所以这里留有通配符。

有“网络安全字体”的概念，但它不是一个明确的列表，据我所知还没有标准化。它只是所有用户代理最有可能在字体与原始字体相似的地方呈现的所有字体中最常见的已知子集。例如，用户代理所指的“Webdings”字体可能是从 Microsoft Windows 上的 Webdings TrueType 字体和基于 Linux 的操作系统上的其他字体加载的，其中两者将被设计为近似相同的外观，例如，其中字形 N 是蝙蝠的图片，但它不必完全是同一张图片。实际文本字体的情况相同——衬线字体将保持衬线，哥特体将保持哥特体，等等。

用户代理和/或它运行的平台甚至可以方便地将常用字体名称映射到它的字体有类似于 Arial 字形的可用，但它完全由软件堆栈自行决定。

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

如果您正在使用 Web API 和 JavaScript 编写绘图应用程序，并且绝对希望包含 system 字体，则可以使用文本输入框，用户可以在其中输入他们希望使用的字体-- 由于您无法访问字体集，因此菜单不合适，尽管您可以使用 datalist 元素为用户提供一些流行的建议（如“Arial”、“Helvetica”、“Georgia”、等等）。如果他们输入的字体可用，用户代理就可以使用它。

【讨论】：