我可以使用12.5px的字体大小吗？

Question

已经是2019年，iPhone视网膜发明了将近10年，正如您所知，您现在可以在CSS3中使用0.5px as border width，并且大多数iPhone和Android设备都可以在视网膜屏幕上正确地将其解析为1px。

我的问题是，如果指定font-size: 12px，实际上它将在视网膜屏幕上显示24px的字体大小。如果我想在视网膜屏幕上显示25px字体，可以使用font-size: 12.5px吗？谢谢！

---

我问我们的UI设计师，她说她在设计移动设备时将使用750px的宽度。因此，这意味着如果她将文本字体大小设置为28px，我会将其除以2，那么我应该在CSS中使用14px，对吧？

但这带来了另一个问题：UI设计器只能按22px，24px，26px，28px等进行设计，因此我可以除以2，以在CSS中得到11px，12px，...。

如果UI设计器将字体大小设置为25px，则在CSS中不能使用12.5px。我尝试将字体大小设置为12.5像素，但无法正常工作，浏览器只是将其转换为13像素。

如何将其准确设置为UI图片？

---

@Josh Lee，非常感谢！我在台式机Chrome浏览器中尝试了您的代码，如下所示：

太好了！但是，如果我在最新的iPhone iOS 12.3.1的Safari中运行代码，则显示如下：

您会看到iPhone仍然无法正确显示.5字体大小，它将更改为12px或13px，只是不能为12.5px。

我也在Android Chrome上尝试了该代码，它可以正确显示。

iPhone真的很烂。

Answer 1

小数px的字体大小是完全有效的。

现代浏览器使用与设备无关的浮点值执行布局，并且在高分辨率（2倍，1.25倍等）显示上运行和在浏览器中设置缩放级别之间几乎没有差别。

您应该注意，某些值会四舍五入为整个像素，例如边框，并且这种差异可能会以微妙的方式体现出来。

作为说明，Firefox为所有这些计算出的边界宽度报告1px，而Chrome则没有。纯粹由边框制成的盒子在Firefox和Chrome中的布局可能会有所不同-这里需要权衡取舍。

作为一个例子，在页面中查找“ px”并查看突出显示的参差不齐的边框-它平滑地向右移动，而不是在特定点跳动。

编辑：Safari（在Mac上）确实是一个奇怪的例子，显然将字体大小四舍五入为整数可以显示（但计算出的值仍然是小数）。

document.querySelectorAll('span').forEach(span => {
  const {width, height} = span.getBoundingClientRect();
  span.textContent += `\t${width}x${height}`;
  const {borderTopWidth} = getComputedStyle(span);
  span.textContent += `\t${borderTopWidth}`;
});

span {
  border: 0.08em solid silver;
  white-space: pre-wrap;
}

<div style="font-size:12.0px"><span>font-size:12.0px</span></div>
<div style="font-size:12.1px"><span>font-size:12.1px</span></div>
<div style="font-size:12.2px"><span>font-size:12.2px</span></div>
<div style="font-size:12.3px"><span>font-size:12.3px</span></div>
<div style="font-size:12.4px"><span>font-size:12.4px</span></div>
<div style="font-size:12.5px"><span>font-size:12.5px</span></div>
<div style="font-size:12.6px"><span>font-size:12.6px</span></div>
<div style="font-size:12.7px"><span>font-size:12.7px</span></div>
<div style="font-size:12.8px"><span>font-size:12.8px</span></div>
<div style="font-size:12.9px"><span>font-size:12.9px</span></div>
<div style="font-size:13.0px"><span>font-size:13.0px</span></div>
<div>&nbsp;</div>