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

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

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

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

最佳答案


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

因此,这包括用户计算机上可用的所有字体,并且对于大多数现代用户代理,它也可以按照CSS font loadingCSS font embedding规范下载和使用的任何字体。是的,Canvas API使用CSS字体嵌入。

除嵌入式字体外,没有这样的列表,因为没有Web API枚举用户在其系统上可使用的字体,因此在此处只剩下一个通配符。
有“Web安全字体”的概念,但这不是一个确定的列表,据我所知还没有进行标准化。它只是所有用户代理最有可能在字体类似于原始字体的位置呈现的所有字体中最常见的子集。例如,用户代理所指的“Webdings”字体可能是从Microsoft Windows以及其他基于Linux的操作系统上的Webdings TrueType字体加载的,在这两种情况下,两者的外观应近似相同,例如,字形N可以是 bat 的图片,但不必完全相同。实际文本字体的样式也是如此-衬线字体将保持衬线,哥特式将保持哥特式,依此类推。
用户代理和/或运行于其上的平台甚至可以方便地将本来就不可用的常见字体名称(如“Arial”(或“Webdings”,如上述示例))映射到其具有可用类似于Arial字形,但完全由软件堆栈决定。
如果您的实际目标是可靠地绘制具有已知轮廓的文本,则最好使用字体嵌入技术。
如果您要使用Web API和JavaScript编写绘图应用程序,并且绝对希望包含系统字体,则可以使用文本输入框,用户可以在其中输入他们希望使用的字体-因为您无权访问该字体设置菜单是不合适的,尽管您可以使用 datalist 元素为用户提供一些受欢迎的建议(例如“Arial”,“Helvetica”,“Georgia”等)。如果他们键入的字体可用,则用户代理将可以使用它。

10-05 20:57
查看更多