等宽字体字符串宽度

Question

我有一个输入元素，它输入一个列表元素，两者都具有相同的等宽字体。 char_width_test 是 span 元素的 ID，该元素包含 1 个具有相同等宽字体的字符。我检查这个宽度和 乘以输入字段中给定的字符串长度以计算从该字符串创建的列表项的宽度。

var ul = document.getElementById('posts_list');
var li = document.createElement('li');
var txt = document.createTextNode(str);
ul.appendChild(li);
li.innerHTML = str;

li.style.width = (($("#char_width_test").width() * str.length)) + 'px';

上面的代码产生的宽度越长，字符串越长。似乎有一些变量会影响我缺少的宽度？

Answer 1

字符之间有字距调整，所以一个字符的宽度并不是你想要的倍数。

http://en.wikipedia.org/wiki/Kerning

确定一个字母的宽度和字距调整量后，您需要n * char_width + (n - 1) * kerning_width 才能更准确。

如果跨度上没有填充或边距，我可能会尝试kerning = width_of_two_characters - (width_of_one_character * 2) 之类的东西。看看结果如何。