javascript - html5 canvas文本中字体大小的有效粒度是多少？

Question

我已经详尽地搜索了答案，我希望 stackoverflow 能再次拯救我。

如果我们设置上下文的字体大小，它似乎允许任意精度:

fontSize = 11.654321;
context.font = 'bold ' + fontSize + 'px sans-serif ';

检查上下文对象将显示字体大小的设置非常精确。然而，我注意到上下文对象的 measureText() 方法总是返回一个整数值(大概是一个上限值)。有谁知道显示文本时使用的实际精度(使用基于像素的字体大小时)？

指向包含此信息的文档的链接就足够了(只要它实际告知精度)。

万一有人问，我正在尝试通过执行以下操作来调整字体以适应给定宽度的文本:

var fontSize = 12;
context.font = 'bold ' + fontSize + 'px sans-serif ';

var text = "whatever";
var maxWidth = 200;

var currentWidth = context.measureText(text).width;
var adjustment = maxWidth / currentWidth;
fontSize *= adjustment;
context.font = 'bold ' + fontSize " 'px sans-serif ';

Answer 1

对于 Chromium 和 Firefox，有效精度似乎在整数级别(我没有测试 Internet Explorer)。我创建了 this jsFiddle研究这个问题，从我的研究来看，在 Chromium 和 Firefox 中，以子整数精度指定的字体大小有效地四舍五入到最接近的整数。

我所做的测试假定 measureText() 方法正常运行(这可能是错误的假设)。测试显示此方法有一些奇怪的行为(在 Chromium 中比在 Firefox 中更明显)。

使用由重复字符 ('m') 组成的固定长度字符串，我绘制了字符串的测量大小与其字体大小的函数关系图。当使用 0.1 作为字体大小输入步长时，对于 1.0 的步长，输出字符串宽度保持不变。这些“步长”以整数字体大小为中心，跳跃发生在整数之间的中点。

在 Chromium 中观察到的奇怪行为是，有时输入的字体大小可以变化多达 2 个像素，而字符串的测量宽度没有变化。此行为是意外的，但会定期发生(从零偏移)。以下输入值区间不会导致测量宽度发生变化:[3.5, 5.5)、[12.5, 14.5)、[21.5, 23.5]、[30.5, 32.5)，依此类推。这些“扁平大台阶”的中心似乎相隔 9 个像素(4.5、13.5、22.5、31.5)。如果这确实是一个错误，第一个中心的间距大约是其余间距的一半，这可能是一个线索。

在 Firefox 中，奇怪的行为要微妙得多。如果将输入步长更改为 1，则图形几乎是线性的(正如预期的那样)。但是图形会周期性地变得稍微陡峭，间隔为 1。例如，这发生在 [11.5, 12.5) 和 [35.5, 36.5 ).

如果我忽略了什么，或者我的方法有什么错误，请发表评论让我知道。我不太关心 Firefox 的行为，但截至目前，我认为 Chromium 中的行为是一个错误。我可能会提交错误报告，如果是这样，我会更新我的答案以包含一个链接。