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

Question

现在已经是 2019 年了，iPhone Retina 发明将近 10 年了，你可能知道，现在你可以在 CSS3 中使用0.5px as border width，而且大部分 iPhone 和 Android 设备在 Retina 屏幕上都能正确解决为 1px。

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

---

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

但这带来了另一个问题：UI设计师只能设计22px、24px、26px、28px等，所以我可以除以2，得到11px、12px、……在css中。

如果 UI 设计师将字体大小设置为 25px，我们不能在 css 中使用 12.5px。我试过设置 font-size: 12.5px，但它不起作用，浏览器只是将它转换为 13px。

如何准确设置为UI图片？

---

@Josh Lee，非常感谢！我在桌面 Chrome 浏览器中尝试了你的代码，它显示如下：

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

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

我也试过 Android Chrome 上的代码，它显示正确。

iPhone 真的很烂。

Answer 1

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

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

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

作为一个例子，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>