Question

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，那么段落将为{{1} }。再次模糊！

假设我们正在开发常见的1x配额屏幕，例如桌面配置屏幕，那么，如何呈现17.5px字体？我已将它们打印在测试html文件中，它们看起来与11.5px字体完全相同。 但这是所有浏览器中推荐的行为吗？那么在使用ems时，填充和边距等大小可能由字体大小决定？他们也被围捕了吗？

编辑：我在3个市长的浏览器上进行了比较。这是：

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

Answer 1

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

有些文本有助于更好地理解这个问题：

（尝试谷歌搜索结果“字体渲染离散空间”，“子像素字体渲染”或“字体提示”）

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个像素”的描述行为与浏览器或系统使用的字体提示技术有关。

Answer 2

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

以下是我在w3.org

上找到的内容

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

因此1px不一定与屏幕上的1个像素相对应，请参见下图：

因此即使您可以根据0.25px（使用上面的像素值）进行计算，要将元素移动1个字面的像素值，也不会这样做。

使用ems时，填充和边距等大小可能由font-size决定？他们也被围捕了吗？

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

另请参阅this website，它提供了一些有趣的行为方式。

请参阅下面的示例代码段。看看div如何仅在translateY(0.5px)上向下移动一个像素，这证明了浏览器对值进行了舍入：

＆＃13;

.box {
  width: 30px;
  height: 30px;
  background-color: #FF0000;
  display: inline-block;
}
#cont {
  outline: 1px solid #000;
  display: inline-block;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

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

这是您的div值，假设您的包装内容中有另一个标题标记：

.box h2 {
    font-size:14px;
}

CSS上的浮点字体大小值如何在浏览器中呈现？

3 个答案: