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中的行为是一个bug。我可以提交错误报告，如果是，我会更新我的回答以包含链接。

html5画布文本中字体大小的有效粒度是多少？

1 个答案: