HTML Canvas 2DContext.font字体大小失效：谷歌字体Exo 2是否为根源？

问题描述 #

在Canvas绘制文本时，使用Arial等其他字体功能正常，但使用谷歌字体Exo 2时出现异常：字体可正常加载渲染，但字体大小始终无法改变，尝试多种字重及可变字体均无效。

正常工作代码：

//省略部分ctx初始化代码
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
ctx.font = `100px Arial`

问题代码：

ctx.font = `100px Exo 2` //即使设置为1000000px，字体大小也无变化。

原因及解决方法 #

问题根源在于字体名称的解析规则：Canvas的font属性遵循CSS字体语法，当字体名称包含空格时，必须用引号（单引号或双引号）包裹，否则浏览器会将空格后的内容误判为字体的附加属性（如字重、样式），导致无法正确识别完整的字体名称，进而引发字体大小设置失效。

修改后的有效代码：

// 用双引号包裹带空格的字体名
ctx.font = `100px "Exo 2"`
// 或使用单引号包裹
ctx.font = '100px \'Exo 2\''

调整后浏览器能正确识别Exo 2字体，字体大小设置即可正常生效。

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