CSS字母间距（letter-spacing）和字符串全长的关系

CSS字母间距（letter-spacing）和字符串全长的关系

问题来源

这是一个用canvas手动实现的富文本编辑的模块，发现了字符串宽度大于元素width导致了异常的显示。

分析过程

然而，所有的文字属性皆从一个用CSS版本的Demo模版中获取到的，同样的属性在CSS中正常显示，所以排除初始值不合理。

定位到核心代码，：

字符串全长=n个字符宽度+（n-1）个letterSpacing+其他

通过精确计算，发现在CSS里：

文字长度=n个字符宽度+ n个letterSpacing+其他

因为字符串“OK”的letterSpacing=-0.4，因为少累加一个，所以导致宽度偏长。

解决方案

方法一：

将宽度累加器let textGraphicsWidth = 0换成let textGraphicsWidth = textGraphicsStyle.letterSpacing，相当于补上一个letterSpacing

方法二：

重构累加函数的代码，让每个charWidth = charWidth + letterSpacing

技巧总结

chrome浏览器中，在识别单个字符在浏览器中的尺寸时，还原100%缩放，浏览器开发者模式审查元素到指定字符串，直接将鼠标光标放到对应文字处即可看到对应文字尺寸

如果需要看单个文字尺寸，双击修改即可