Question

例如：

G比我更宽
W比l（L）

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

Answer 1

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

Answer 2

Canvas解决方案，如果你想：

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

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 3

DOM解决方案

body

将其插入function measureLetter(letter) { const ruler = document.getElementById("ruler"); ruler.innerHTML = letter; return ruler.offsetWidth; }元素。然后使用函数来测量字母。

offsetWidth

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

要使函数返回有用信息，请使用您选择的font-family和font-size为{{1}}元素添加样式。

我可以比较字母大小（宽度和高度，以像素为单位）吗？

3 个答案:

DOM解决方案