Question

有没有办法使用单倍间距字体的字形宽度来设置字体大小？

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

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

<div id=xyzzy>1234567890</div>

我正在寻找这个的原因是我有一些内容可以在移动设备上以等宽字体显示，无法包装或延伸屏幕。我希望能够在320px屏幕上显示44个字符的文本。我似乎无法正确地获得字体大小，以便它在所有浏览器中看起来都很好。它要么延伸到视口之外，要么留下右边的空白区域。

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根据每个字符的宽度设置等宽字体大小

1 个答案: