Question

我正在使用字体控制台，我希望它在所有字符（等宽字体）中具有15像素高度和7像素宽度，并且具有100％的精度（字符不必在视觉上拉伸但是它＆＃39; s框限制必须没有小数）。我一直在搞乱CSS font-size属性，但数字是如此随机。这是一个例子：

＆＃13;

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()

＆＃13;

span {
  font-family: consolas;
}

＆＃13;

<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>

＆＃13;

您可以更改该输入的大小，并检查它是否低于700（7px + 100个字符）。它是如此随机，以至于我无法得到它。另外，我只是注意到了这个限制，如果你最后添加一个5，它的宽度为700.4375但是如果你添加一个4，你可以添加世界上它没有的所有9个＆＃39;重要（可能浮动限制的东西）。

Haven没有经过更精确的测试（超过100个字符），但我想要的是拥有15x7大小的简单等宽字体，这样我就不用再担心奇怪的尺寸问题了。

使用解决方案进行编辑（在接受的答案之后）：

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

＆＃13;

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()

＆＃13;

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

＆＃13;

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

＆＃13;

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>

希望这就是你要找的东西

Monospace字体，高度恰好为15px，宽度为7px

1 个答案: