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

Question

已经是 2019 年了，iPhone Retina 发明近 10 年，大家可能知道，现在 CSS3 中可以使用0.5px 作为边框宽度，而且大部分 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真的很烂。

标签： css

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>