javascript - 高度为 15px，宽度为 7px 的等宽字体

Question

我正在使用字体控制台，我希望它在所有字符(等宽)中具有 15 像素的高度和 7 像素的宽度，并且具有 100% 的精度(字符不必在视觉上拉伸(stretch)，但它的框限制必须没有小数)。我一直在摆弄 CSS font-size 属性，但数字是如此随机。这是一个例子:

function Update(){
  document.getElementById('Size').style.fontSize = document.getElementById('Input').value + "px";
  document.getElementById('Width').innerHTML = document.getElementById('Size').getBoundingClientRect().width;
  document.getElementById('Height').innerHTML = document.getElementById('Size').getBoundingClientRect().height;
}
Update()

span {
  font-family: consolas;
}

<span id="Size">1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</span>
<br>
<br>
<span>Font size: </span><input id="Input" oninput="Update()" value="12.7399992942810049711965802998747676610946655273437">
<br>
<span>Width (100 characters): </span><span id="Width"></span>
<br>
<span>Height (1 character): </span><span id="Height"></span>

您可以更改该输入的大小并检查它是否小于 700(7 像素 + 100 个字符)。这太随机了，我不明白。另外，我刚刚注意到这是限制，如果你在最后添加一个 5，它的宽度为 700.4375 但如果你添加一个 4 你可以添加世界上所有的 9s 这无关紧要(可能是 float 限制东西)。

尚未进行更精确的测试(超过 100 个字符)，但我想要的是具有 15x7 大小的简单等宽字体，这样我就不必再担心奇怪的大小问题了。

使用解决方案进行编辑(在接受答案后):

<span> 的工作值最大宽度和/或高度为 3000 个字符。

for(var i=0;i<3000;i++){ // 3000
  document.getElementById('Size').innerHTML += "1"; // "1<br>" for some reason here in the Code Snippet the height is 53997 instead of 45000
}
function Update(){
  document.getElementById('Size').style.fontSize = document.getElementById('Input').value + "px";
  document.getElementById('Width').innerHTML = document.getElementById('Size').getBoundingClientRect().width;
  document.getElementById('Height').innerHTML = document.getElementById('Size').getBoundingClientRect().height;
}
Update()

span {
  font-family: consolas;
  letter-spacing: 0.001192px; // 0.001192 to 0.001196
}

<span id="Size"></span><br>
<input id="Input" oninput="Update()" value="12.739"> <span id="Width"></span><span>x</span><span id="Height"></span>

Answer 1

可以用 CSS letter-spacing: 0.001px; property:

function Update(){
  document.getElementById('Size').style.fontSize = document.getElementById('Input').value + "px";
  document.getElementById('Width').innerHTML = document.getElementById('Size').getBoundingClientRect().width;
  document.getElementById('Height').innerHTML = document.getElementById('Size').getBoundingClientRect().height;
}
Update()

span {
  font-family: consolas;
  letter-spacing: 0.001px;
}

<span id="Size">1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</span>
<br>
<br>
<span>Font size: </span><input id="Input" oninput="Update()" value="12.7399992942810049711965802998747676610946655273437">
<br>
<span>Width (100 characters): </span><span id="Width"></span>
<br>
<span>Height (1 character): </span><span id="Height"></span>

希望这就是你要找的