这个问题的核心原因是**字体的字距调整（Kerning）**机制，以及Canvas的measureText方法测量的是文本的「前进宽度（advance width）」而非单纯的字符视觉宽度之和。

关键概念拆解 #

• 前进宽度（Advance Width）：measureText返回的单个字符宽度，包含了字符本身的视觉宽度，加上字体设计师预留的左右侧边间距——这部分间距是为了让单个字符在排版时和其他字符搭配更自然。
• 字距调整（Kerning）：字体引擎会自动对相邻字符对的间距进行微调（通常是收紧），哪怕是相同字符，目的是让连续文本的视觉效果更紧凑美观。这种调整会直接影响多字符文本的总宽度。

结合你的测试数据验证 #

你的测试中：

• 单个'1'的前进宽度：8.8984375
• 10个'1'的实际总宽度：78.296875

我们可以算出字体对相邻'1'的调整量：

总调整量 = 实际总宽度 - 单个宽度×数量 = 78.296875 - 8.8984375×10 = -10.6875
每对字符的调整值 = 总调整量 ÷ (字符数-1) = -10.6875 ÷ 9 = -1.1875

也就是说，每两个相邻的'1'之间，字体引擎自动收紧了1.1875像素的间距，最终导致总宽度比理论乘积小。

如何让总宽度等于单个宽度的乘积？ #

如果你需要严格的等宽排版，可以尝试以下方法：

• 使用支持**等宽数字（Tabular Figures）**的字体变体，这类字体中所有数字的前进宽度完全相同，不会应用字距调整。修改字体设置如下：

  ctx.font = '16px/16px arial tabular-nums';
  

• 强制关闭字距调整（部分浏览器可能支持）：

  ctx.letterSpacing = "0px";
  ctx.font = '16px/16px arial';
  

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