单空格字体字符串宽度

Question

我有一个输入元素，它馈送到一个列表元素中，两者都使用相同的单空格字体。char_width_test是包含1个具有相同单空格字体的字符的span元素的ID。我检查了这个宽度乘以输入字段中给定的字符串的长度，计算根据该字符串创建的列表项的宽度。

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)的东西。看看结果如何。