我可以使用 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图片？

---

@乔什·李，非常感谢你！我在桌面 Chrome 浏览器中尝试了您的代码，如下所示：

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

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

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

iPhone 确实很烂。

Answer 1

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

\n\n

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

\n\n

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

\n\n

例如，Firefox 会报告1px所有这些的计算边框宽度，而 Chrome 则不会。纯粹由边框宽度构成的框在 Firefox 和 Chrome \xe2\x80\x94 中的布局可能会有所不同，这里需要进行权衡。

\n\n

另外作为说明，在页面中查找“px”并查看突出显示 \xe2\x80\x94 的参差不齐的边框，它平滑地向右移动，而不是在某个点跳跃。

\n\n

编辑：Safari（Mac 上）确实很奇怪，显然将字体大小四舍五入为整数以供显示（但计算值仍然是小数）。

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n