CSS 上的浮动字体大小值如何在浏览器之间呈现？

Posted 2023-03-06

【中文标题】CSS 上的浮动字体大小值如何在浏览器之间呈现？

【英文标题】：How do float font-size values on CSS render among browsers?

【发布时间】：2016-06-29 07:36:21

【问题描述】：

CSS em 单元很棒，但有些事情总是让我烦恼，可能是因为我没有完全理解它们。

字体在每种尺寸下的渲染效果都不尽相同，在不精确的值上尤其糟糕。这就是为什么，如果你想使用em 为字体提供精确的像素值，你必须这样做（假设你没有改变正文的 16px 字体大小）：

font-size: 0.875em; /* 14px */
font-size: 1.25em; /* 18px */

也许你只是想增加一点大小，但后来意识到0.9em = 14.4px，然后你害怕你的字体看起来模糊！在任何情况下，如果你给一个段落一个font-size 或1.25em (18px)，然后将正文大小从16px 更改为14px，那么该段落将是17.5px。再次模糊！

假设我们正在处理常见的 1x 口粮屏幕（如桌面屏幕），例如，11.5px 字体将如何呈现？我已将它们打印在一个测试 html 文件上，它们看起来与 12px 字体一模一样。

这是所有浏览器都推荐的行为吗？使用 ems 时可能由字体大小决定的填充和边距等大小呢？他们也会被围捕吗？

我对 3 个市长浏览器上的效果图进行了比较。这里是：

我把它放大了一点（200%），这样更容易看到细节。在顶部，您可以看到相同文本在 14 像素（左）和 14.4 像素（右）处的呈现方式。下面，我使用差异混合模式将它们叠加在 Photoshop 上，看看是否有任何差异。如您所见，Chrome 对 font-size 进行四舍五入，并以相同的大小呈现，同时框的高度不同。 Firefox 具有相同的高度，但字体在 x 轴上的渲染略有不同，而字体的高度似乎相等。 IE 结果是一种混合。无论如何，我真的很惊讶，因为 14.4px 字体似乎根本没有模糊。

【参考方案1】：

但这是所有浏览器都推荐的行为吗？

这是我在w3.org找到的内容

参考像素 是像素密度为 96dpi 且距离阅读器一臂远的设备上一个像素的视角。对于 28 英寸的标称臂长，因此视角约为 0.0213 度。因此，对于在手臂长度上阅读，1px 对应于大约 0.26 毫米（1/96 英寸）。

所以1px不一定对应屏幕上的1个像素，见下图：

因此，即使您可以根据 0.25px（使用上面的像素值）计算，将元素移动 1 个文字屏幕像素，也没有完成。

在使用 em 时，可能由字体大小决定的填充和边距等大小呢？他们也会被围捕吗？

查看this question，它可能有用。基本上这些值是四舍五入的。您的11.5px 看起来与12px 相同的原因是因为它被四舍五入了。 11.4px 看起来就像 11px

另请参阅this website，它提供了一些关于其工作原理的有趣行为。

请参阅下面的代码片段示例。看看 translateY(0.5px) 上的 div 是如何只下移一个像素的，这证明浏览器会舍入该值：

.box 
  width: 30px;
  height: 30px;
  background-color: #FF0000;
  display: inline-block;

#cont 
  outline: 1px solid #000;
  display: inline-block;

<div id="cont">
  <div class="box" style="transform: translateY(0.1px)"></div>
  <div class="box" style="transform: translateY(0.2px)"></div>
  <div class="box" style="transform: translateY(0.3px)"></div>
  <div class="box" style="transform: translateY(0.4px)"></div>
  <div class="box" style="transform: translateY(0.5px)"></div>
  <div class="box" style="transform: translateY(0.6px)"></div>
  <div class="box" style="transform: translateY(0.7px)"></div>
  <div class="box" style="transform: translateY(0.8px)"></div>
  <div class="box" style="transform: translateY(0.9px)"></div>
  <div class="box" style="transform: translateY(1.0px)"></div>
</div>

【讨论】：

在我的例子中，我没有看到从 0.5px 的跳跃，我看到一行水平像素越来越淡，直到它们消失

您使用的是什么浏览器。我在 Firefox 45 和 47 上测试过这个？

【参考方案2】：

这不是一个简单的问题，并不“完全”适用于浏览器。 这更多是关于使用的整个渲染系统以及“连续空间与离散空间”或“使用方框绘制曲线”的问题。

一些有助于更好地理解问题的文本：

（尝试 google 搜索“字体渲染离散空间”、“亚像素字体渲染”或“字体提示”的结果）

http://jcgt.org/published/0002/01/04/paper.pdf http://www.cutebugs.net/files/curve/fabris97antialiasing.pdf http://lspwww.epfl.ch/publications/typography/frsa.pdf https://www.grc.com/ctwho.htm

在这里很难定义“正确”行为，因此“默认行为”几乎是不可能的。这是一个关于空间和人类感知的数学问题，而不是浏览器行为或 CSS。

...无论如何，关于“移动 1 个像素”的描述行为与浏览器或系统使用的字体提示技术有关。

【讨论】：

这是很多有用的信息，您看起来已阅读，但最后，这不是一个明确的答案，它只是“它取决于”。我知道这很难，但你能提取一个通用规则以便在大多数情况下安全使用吗？您认为使用亚像素字体大小是否安全？

我知道这不是一个答案，但这个问题没有真正的答案。字体的渲染（位置和大小）不仅取决于浏览器，还取决于操作系统、图形系统配置、像素密度、媒体……我唯一相信的经验法则是：0.875 rem 或更小使用小数 (CSS) 像素对易读性和大小或定位是危险的，仅适用于打印媒体（高分辨率或“像素比”：1css 像素 = 许多媒体像素）。媒体像素只是一个像素，不能分割。

【参考方案3】：

这不是一个需要以分层方式定义 css 的真正棘手的问题：

.box 
    font-size: 1em; /* size according to your*/

这是您的 div 值，假设您的框内容中有另一个标题标签：

.box h2 
    font-size:14px;