为什么 App 端 Canvas 设置 font 时不支持小数像素？

[toFrankie]

问题分类

uni-app

问题描述

在 App 端使用 Canvas 设置文本样式时，

发现 fontSize 不支持小数像素。

canvasContext.font = 'normal 400 12px system-ui' ✅
canvasContext.font = 'normal 400 12.5px system-ui' ❌

会抛出 Warning，进而不会设置文本样式。

10:37:32.549 Failed to set 'font' on 'CanvasContext': invalid format. __WARN

翻看源码发现是 set font 里的正则表达式无法匹配到小数像素。

var fontFormat = value.match(
  /^(([\w\-]+\s)*)(\d+r?px)(\/(\d+\.?\d*(r?px)?))?\s+(.*)/
)

匹配示例：https://regexr.com/8cpbq

请问是出于什么考虑不支持小数像素？

有时候需要绘制文本，如果先经过 Math.round(originalPixel) 等处理，有时实际绘制出来的文本会预期的的“粗”或“细”，因此希望可以支持小数像素。

附加信息

No response

[toFrankie]

另外，对于 fontWeight 为什么只支持 normal、bold 两者，而不支持 500、600、700 这类数值。

// ...
else if (['bold', 'normal'].indexOf(value) > -1) {
  actions.push({
    method: 'setFontWeight',
    data: [value],
  })
  self.state.fontWeight = value
}

▲ 源码