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%缩放,浏览器开发者模式审查元素到指定字符串,直接将鼠标光标放到对应文字处即可看到对应文字尺寸
如果需要看单个文字尺寸,双击修改即可