Question

考虑

<div>manmadhan</div>

我需要知道是否有任何可能的方法来根据字体找到每个字符的宽度，因为我使用的是反应应用我只需要javascript

输出应该像m = 12px，n = 24像素类似的东西我试图将文本分开并尝试使用get bounds但是空格有问题，有什么建议吗？

我已经尝试过以下方法，但它给出了整个字符串的宽度，而不是字符串中单个字符的宽度 Calculate text width with JavaScript

Answer 1

真正做到这一点的唯一方法是渲染字母，测量它然后再删除它。

当你打开页面时，你可以做这样的事情来获取所有的字母，虽然最好只在你需要的时候得到长度，或者甚至只是得不到长度

let letterLength = {};
let letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

for (let letter of letters) {
  let span = document.createElement('span');
  span.append(document.createTextNode(letter));
  span.style.display = "inline-block";
  document.body.append(span);
  letterLength[letter] = span.offsetWidth + "px";
  span.remove();
}

let word = "manmadhan";

for (let i = 0; i < word.length; i++) {
  console.log(word[i] + ": " + letterLength[word[i]])
}

console.log(letterLength)

这并不理想，因为它会使加载时间变慢，正如我所说，如果可以，请避免这样做。

<强>警告：

正如Liam所指出的，计算单个字符的宽度可能会导致字符宽度的总和可能不等于单词总宽度。这是因为名为Kerning的东西。

在排版中，字距调整是调整间距的过程字符比例字体，通常是在视觉上实现的令人愉快的结果。字距调整单个字母之间的空格形式，而跟踪（字母间距）均匀调整间距一系列人物。在一个良好的字体，二维每对字符之间的空格都具有视觉效果类似的地区。

下面的示例将比较span的宽度与整个单词的宽度与其独立字母的总和。

let letterLength = {};
let letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

for (let letter of letters) {
  let span = document.createElement('span');
  span.append(document.createTextNode(letter));
  span.style.display = "inline-block";
  document.body.append(span);
  letterLength[letter] = span.offsetWidth;
  span.remove();
}


let word = document.querySelector(".word");
let totalLength = 0;
let actualLength = word.offsetWidth

for (let i = 0; i < word.innerHTML.length; i++) {
  totalLength += letterLength[word.innerHTML[i]];
}
console.log("span: "+actualLength+"px");
console.log("letters: "+totalLength+"px");

.word {
  display: inline-block;
}

<span class="word">Averages</span>

我希望这能回答你的问题。

如何使用javascript查找每个字符的宽度（以像素为单位）

1 个答案: