我能比较字母尺寸（以像素为单位的宽度和高度）吗？

Question

例如：

• G比I更宽
• W比l(L)更宽

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

- Artem

---

你能创建一个隐藏的DOM元素吗？ - LellisMoon

@Mr.Bruno 不是的。我需要在包含5k+元素的数组中找到最长的大小（而不是长度）字符串。 - Artem

最快的方法是（我知道你想避免它）在画布上暂时呈现文本，并对字体的每个字符使用 Canvas.measureText 方法，将值存储在键值对象中，然后使用此对象计算数组中字符串的宽度。 - Mosè Raguzzini

在我看来，除了事先在一个对象中定义每个可能字符的宽度（{'a':6, ..., 'i':1, ...}），并运行一个将字符串中每个字符的宽度相加的函数之外，没有其他正确的方法来完成这个任务。 - Zenoo

为什么你有这样一个要求，即“不要插入DOM或在画布上渲染”？对我来说似乎是一个不寻常的要求。 - Konrad Borowski

Answer 1

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

- LiQIang.Feng

---

我并不是想改变你的字体，我指的是字母宽度是字体的一个特性，而不是网页的特性。你无法从JS或CSS中获取宽度（除非有一种模型可以存储所有字体类型的字母宽度，然后检查你使用的字体，然后返回大小），这只与你使用的字体有关。 - LiQIang.Feng

Answer 2

如果您想要Canvas解决方案：

编辑：尝试使用大写和小写都可以，它能够正常工作。

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>

- Mosè Raguzzini

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元素。

- Tomasz Bubała

---

似乎可以根据 CSS 字体大小（例如：12），获取四舍五入后的宽度。 - Mosè Raguzzini

你总是得到四舍五入的值，例如：[字体大小：12像素，字体家族：Arial] -> { A：12，I：5 } - Mosè Raguzzini

@TomaszBubała 谢谢你的回答，但我已经实现了这个解决方案，画布更好。 - Artem