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

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的,那么该段将17.5px.再次模糊!

假设我们正在开发常见的1x配额屏幕,例如桌面屏幕,那么,如何11.5px渲染字体？我把它们打印在一个测试html文件上,它们看起来就像一个12px字体.但这是所有浏览器中推荐的行为吗？那么在使用ems时,填充和边距等大小可能由字体大小决定？他们也被围捕了吗？

编辑:我在3个市长的浏览器上做了一个比较.这里是:

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

Answer 1

\n

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

\n

\n\n

这是我在w3.org上找到的

\n\n

\n

参考像素\n是像素密度为96dpi、距阅读器距离为arm\xe2\x80\x99s长度的设备上一个像素的视角。对于 28 英寸的标称臂\xe2\x80\x99s 长度，视角约为 0.0213 度。对于在 arm\xe2\x80\x99s 长度处读取，1px 相当于大约 0.26 毫米（1/96 英寸）。

\n

\n\n

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

\n\n

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

\n\n

\n

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

\n

\n\n

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

\n\n

另请查看此网站，它提供了一些有关其工作原理的有趣行为。

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n