使用 CSS 根据每个字符的宽度设置等宽字体大小

Question

有没有办法使用 mono-spaced 字体的字形宽度来设置使用 CSS 的字体大小？

例如，我希望此框内的 10 个字符每个正好 20px 宽，这样文本就可以完全填满框，而不管实际使用的是哪种 monospace 字体。目前我使用的 font-size 指令设置字体的高度，而不是每个字母的宽度。

#xyzzy {
  width: 200px;
  padding: 0;
  margin: 10px;
  border: 10px solid black;
  font-family: monospace;
  font-size: 20px;
}

<div id=xyzzy>1234567890</div>

我寻找这个的原因是我有一些内容要在移动设备上以单色space 字体显示，这种字体不能环绕或延伸出屏幕。我希望能够在 320 像素的屏幕上准确显示 44 个字符的文本。我似乎无法正确调整字体大小，使其在所有浏览器中看起来都不错。它要么延伸到视口之外，要么在右侧留下白色 space。

Answer 1

这是一个 JavaScript 解决方案，它以 20px 字体大小开始，然后按比例缩放以完全适合所需的 200px 宽度。

var xyzzy = document.getElementById('xyzzy');
var currentWidth = xyzzy.clientWidth+1;
var desiredWidth = 200;
var currentFontSize = 20;
xyzzy.style.fontSize = currentFontSize * desiredWidth / currentWidth + "px";

#xyzzy {
  display: inline-block;
  white-space: nowrap;
  padding: 0;
  margin: 10px;
  border: 10px solid black;
  font-family: monospace;
  font-size: 20px;
}

<div id=xyzzy>1234567890</div>

我使用了 Calculate text width with Javascript 中的代码来计算当前文本宽度。

使用 CSS 根据每个字符的宽度设置等宽字体大小

Use CSS to set the monospace font size based on the width of each character

css

fonts

width

monospace