2

我已经详尽地寻找答案，我希望 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 ';
4

1 回答 1

0

对于 Chromium 和 Firefox，有效精度似乎是整数级别（我没有测试过 Internet Explorer）。我创建了这个 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 中的行为是一个错误。我可能会提交错误报告，如果是这样，我将更新我的答案以包含一个链接。

于 2012-12-02T19:21:32.030 回答