Question

我有一个字符串，可以包含unicode字母。我想知道，当它以等宽字体字体写在屏幕上时，它是多么“宽”（用字母，而不是像素）。

它看起来可能看起来不那么微不足道。请考虑以下代码：

var la = "لا"
console.log(la.length); // prints 2
console.log(la.split);  // [ 'ل', 'ا' ]

In REPL

虽然لا在几乎所有等宽字体中都有1个字母的宽度，但它实际上是2个字母 - ل和ا（忽略写作方向问题，这是一个单独的东西:) ）

是否可以在Javascript中找到“视觉宽度”（或如何准确调用它？）

在我的示例中，我想要一个函数，我输入لا，结果将是1，而不是2中的.length。

（对不起，如果它太混乱，我只是不知道如何正确表达自己。）

我能找到的所有东西都是找到像素的宽度。我想知道“等宽字母”中的宽度。这个字符串在monospace中会占用多少字母？

如果不可能，那就没事了。

编辑：我发现用css和text-overflow：省略号做我想做的事情要容易得多。但是，我会在这里提出这个问题，也许对其他人有帮助。

Answer 1

您可以使用等宽字体创建画布。然后使用measureText，您可以测量字符串的宽度和单个字母的宽度，然后将它们分开。

var countLetters = (function() {
  var ctx = document.createElement('canvas').getContext('2d');
  ctx.font = '48px monospace';
  var letterWidth = ctx.measureText('a').width;
  return function (str) {
    return Math.round(ctx.measureText(str).width / letterWidth);
  };
})();

我认为Math.round不是必需的，但它会保证结果为整数。

Answer 2

一种总体解决方案是将字符串放入div以获取像素宽度，然后除以单个字符的像素宽度。它会很难处理性能，但应该是准确的，因为固定宽度字体中的每个字符应该是相同的水平空间量。

找出等宽字母中字符串的“图形长度”

2 个答案: