HTML5 Canvas文本中支持的字体

吉恩·乔治

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

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

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

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

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

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

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

因此,这包括用户计算机上可用的所有字体,并且对于大多数现代用户代理而言,它还可以根据CSS字体加载CSS字体嵌入规范下载和使用的任何字体是的,Canvas API使用CSS字体嵌入。

我只是想要一个列表,如果不是大多数HTML画布浏览器都支持的字体。

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

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

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

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

如果您要使用Web API和JavaScript编写绘图应用程序,并且绝对希望包含系统字体,则可以使用文本输入框,用户可以在其中输入他们希望使用的字体-因为您无权访问该字体设置,菜单将是不合适的,尽管您可以使用datalist元素为用户提供一些受欢迎的建议(例如“ Arial”,“ Helvetica”,“ Georgia”等)。如果他们键入的字体可用,则用户代理将可以使用它。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章