我可以比较字母大小(以像素为单位的宽度和高度)吗?

Question

例如：

• G 比 I 宽
• W 宽于 l(L(

我如何在 JS 中比较两个字母的大小，以测试具有 5 000 个元素的数组的合理性能。

Answer 1

这取决于您的页面使用的首页，等宽字体具有相同的宽度，而比例字体不是，不同的字体类型不同

Answer 2

画布解决方案，如果您想：

编辑：尝试大写和小写宽度，它可以工作。

function getTextWidth(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}
var letters = [ 'A', 'B', 'C' ]; // All character needed, upper and lowercase
var lettersWidth = $.map(letters,
function(letter, i){
    return { letter: letter,
             width:   getTextWidth(letter, "bold 12pt arial")}
});
console.log(lettersWidth);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

DOM 解决方案

<span id="ruler" style="visibility: hidden; white-space: nowrap;"></span>

将其插入body元素中。然后使用函数来测量字母。

function measureLetter(letter) {
  const ruler = document.getElementById("ruler");
  ruler.innerHTML = letter;
  return ruler.offsetWidth;
}

此解决方案基于将字母放入元素内，并使用 offsetWidth 获取元素的宽度。对于快速解决方案，我会为每个字符执行此操作一次，并将其长度存储在对象中。然后，该对象可用于比较数组中的元素，而无需使用 DOM 或画布。

要使函数返回有用的信息，请使用所选font-family和font-size来设置span元素的样式。