浏览器中CSS渲染的大小值？

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文件上，它们看上去完全像12 12px字体。 但是，这是所有浏览器推荐的行为吗？ 那么在使用ems时，可以通过字体大小来确定填充和边距等大小？ 他们是否也被四舍五入？

编辑：我做了3个市长浏览器渲染之间的比较。 这里是：

我稍微扩大了一点（200％），以便更容易看到细节。 在顶部，您可以看到相同的文本如何在14px（左）和14.4px（右）呈现。 下面，我使用Difference blendmode将它们覆盖在photoshop上，以查看是否存在任何差异。 正如你所看到的，Chrome浏览器会调整字体大小，并以相同的大小呈现它，同时，框的高度也不相同。 Firefox具有相同的高度，但字体在x轴上呈现稍微不同，而字体的高度似乎相同。 IE的结果是一种混合。 无论如何，我真的很惊讶，因为14.4px字体看起来并没有模糊。

---

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

一些文本可以帮助我们更好地理解这个问题：

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

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

---

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

这是我在w3.org上找到的

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

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

因此，即使您可以基于0.25px （使用上面的像素值）进行计算，但要将元素移动1个文字屏幕像素，也不会完成。

那么在使用ems时，可以通过字体大小来确定填充和边距等大小？ 他们是否也被四舍五入？

看看这个问题，它可能是有用的。 基本上这些值是四舍五入的 。 原因你11.5px看起来相同12px是因为它被围捕。 11.4px看起来就像11px

另外看看这个网站，它提供了一些关于它如何工作的有趣的行为。

请参阅下面的示例代码片段。 看看div如何在translateY(0.5px)上只移动一个像素，这证明浏览器可以提高价值：

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

---

这不是一个真正的凝灰岩问题，您需要以分层方式定义css

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

     }

这是你的div值，假设你的box内容中有另一个标题标签。

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

只是简单

更多信息

链接地址: http://www.djcxy.com/p/87491.html

上一篇: size values on CSS render among browsers?

下一篇: Responsive Font Size