为何HTML中整词与单个字母的宽度测量结果存在差异？

我正在尝试实现类似Knuth-Plass的换行算法，但市面上现有方案都不适用我的场景，而且我不想引入额外的库开销。在相同字体、字号下，将整词渲染到div中测量的宽度，和单个字母宽度的累加值不一致。这种差异没有统一规律，已测试样本中差异范围从0.00001像素到0.59像素，平均约0.25像素，远超我可接受的±0.01像素范围。该差异会累积，甚至10-15个单词的半像素差异都可能导致不必要的换行。我排查后认为代码没有问题，怀疑是HTML或浏览器文本处理的隐藏特性导致的。我主要用JS的getBoundingClientRects()进行测量，也试过HTML5 Canvas，两种方法结果一致，仅存在小数点后5-6位的微小偏差。请问这是什么原因？

• 字距调整（Kerning）：这是核心原因之一。绝大多数专业字体都会对特定字母组合（如VA、To、Te等）调整字符间的间距，让文本视觉上更协调自然。单个字母宽度的累加不会计算这种组合式的间距调整，但整词测量会包含该字距优化，直接导致宽度差异。
• 连字（Ligatures）：部分字体（尤其是衬线体、手写体或专业排版字体）会将某些高频字母组合（如fi、fl、ff、ffi）合并为一个单独的字形。这个合并后的字形宽度必然不等于单个字母宽度的总和，比如fi连字通常比f+i的宽度窄。
• 亚像素渲染与浮点精度差异：浏览器采用亚像素（如1/2、1/3像素）渲染文本以提升清晰度。单个字符测量和整词测量时，字符的亚像素对齐逻辑可能不同——整词会以单词整体为单位做对齐优化，而单个字符是独立对齐，这种差异会转化为可测量的浮点值偏差，且随着字符数量增加累积放大。
• 字体的整体布局优化：部分字体内部针对单词级别的文本做了细微布局调整，比如单词首尾字符的间距、字符间的视觉平衡微调，这些优化不是单个字符宽度的简单叠加，会导致整词宽度与累加值不一致。
• 测量上下文的差异：即使使用getBoundingClientRects()或Canvas的measureText()，单个字符测量时的上下文（无前后字符）和整词测量的上下文（字符间相互影响）本质不同。浏览器渲染引擎对孤立字符和连续字符的边界框计算逻辑有细微区别，比如孤立字符的边界框可能包含预留的间距，而连续字符时这些预留间距会被合并或调整。

可行的优化方向 #

• 放弃单个字符宽度累加的方式，直接测量完整单词/短语的宽度，这是最准确的方案。
• 若必须拆分测量，提前建立常用字符组合的宽度缓存表（而非单个字符），覆盖你场景中高频出现的字母组合。
• 调整换行算法的容差阈值，比如将可接受误差放宽至±0.5像素，或采用整数像素作为换行判断依据（需权衡视觉精度）。

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