JavaScript Canvas context.font如何配置多个回退字体？

CanvasRenderingContext2D.font 属性遵循和CSS font 简写属性完全一致的解析规则，原生支持多字体回退配置，不需要编写额外的检测或降级逻辑。

你需要的「优先用Arial，不存在则回退Tahoma，再不存在回退Verdana」的需求，直接按CSS字体列表的逗号分隔写法赋值即可，代码如下：

ctx.font = '20px arial, tahoma, verdana'
ctx.fillText('Hello World!', 100, 100)

相关规则说明 #

• 字体匹配顺序严格从左到右执行：浏览器会优先选用列表中第一个在当前环境（系统已安装字体、已加载完成的Web字体）可用的字体渲染文本，前序字体不可用时自动向后匹配，和CSS font-family 的回退逻辑完全一致。
• 赋值时需严格遵循CSS font简写的语法顺序：字重、字体风格、字号/行高等属性必须写在字体列表之前，不要将这类属性插入逗号分隔的字体列表中间，否则会导致整个font属性值解析失败，回退到浏览器默认字体。
• 建议在字体列表末尾追加通用字体族作为最终兜底，避免所有指定字体都不可用的时候渲染结果不符合预期，示例：

  // 末尾追加sans-serif无衬线通用字体族兜底
  ctx.font = 'bold 20px arial, tahoma, verdana, sans-serif'
  

内容的提问来源于stack exchange，提问作者Joachim