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

Question

我正在使用字体控制台，我希望它在所有字符（等宽）中具有 15 像素的高度和 7 像素的宽度，并且具有 100% 的精度（字符在视觉上不必拉伸，但它是框限制必须没有小数）。我一直在摆弄 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 这无关紧要（可能是浮动限制东西）。

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

编辑解决方案（接受答案后）：

<span> 的工作值，最大 3000 个字符宽度 and/or 高度。

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; 属性:

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>

希望这就是您要找的

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

Monospace font with exactly 15px height and 7px width

html

javascript

css

fonts

font-size