javascript - 等宽字体字符串宽度

Question

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

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)如果跨度上没有填充或边距，我可能会尝试类似的方法。看看结果如何。