CSS中的字体大小 - %或em？

Question

CSS中的字体大小 - %或em？

在CSS中设置字体大小时,我应该使用百分比值(%)还是em？你能解释一下这个优势吗？

Answer 1

A List Apart上有关于网页排版的非常好的文章.

他们的结论:

在ems中调整文本和行高,在主体上指定百分比(以及Safari 2的可选警告),显示可以在当今常用的所有浏览器中提供准确,可调整大小的文本.这是一种技术,您可以将其放入工具包中,并将其用作CSS中调整文本大小的最佳实践,以满足设计人员和读者的需求.

实际上`line-heights`写得更好*没有*任何单位.这是规范所允许的,并且当涉及到基于"em"的行高时,完全避免某些真正烦人的浏览器怪癖 (29认同)
我想让人们意识到这篇文章是从2007年开始的.从那时起,现代浏览器变得越来越普遍,而现代浏览器通常会放大而不是将字体大小增加为默认值.因此,'px'变得更加普遍,在我看来是一种更好的方法.当然这是有争议的,但我个人在项目中遇到问题,因为嵌套em. (16认同)
@ Mohag519 em的嵌套是一个危险的陷阱.:) (5认同)

Answer 2

Gal*_*ian 14

来自http://archivist.incutio.com/viewlist/css-discuss/1408

%:某些浏览器不处理font-size的百分比,但将150%解释为150px.(例如,某些NN4版本.)IE在嵌套元素上的百分比也存在问题.似乎IE使用相对于视口的百分比而不是相对于父元素.另一个问题(虽然根据W3C规范是正确的),在Moz/Ns6中,你不能使用相对于没有指定高度/宽度的元素的百分比.

em:有时候浏览器会使用错误的参考大小,但相对单位却是问题最少的.您可能会发现它有时会被解释为px.

pt:分辨率差异很大,不应该用于显示.不过,这对于打印使用来说非常安全.

px:屏幕上唯一可靠的绝对单位.它可能在印刷中被错误地解释,因为一个点通常由几个像素组成,因此一切都变得非常小.

您是否真的说过,如果我使用百分比字体大小,某些Netscape Navigator 4用户可能无法正确查看我的页面？ (11认同)
引用的讨论是从2002年开始的.这仍然是相关的吗？是否有任何浏览器与em或%错误一起使用？ (3认同)
引用浏览器中 20 年前的错误并不是一个有用的答案。 (2认同)

Answer 3

Bjö*_*tau 9

当您不将其用于字体大小时，真正的区别就很明显了。设置 a paddingof1em与100%. em总是相对于字体大小。但%可能与字体大小、宽度、高度以及其他一些我不知道的事情有关。

Answer 4

Lia*_*iam 7

两者都相对于它的大小调整字体大小.1.5em与150%相同.唯一的优势似乎是可读性,选择最适合您的方式.

谢谢 Lee，我刚刚在 IE6、IE7、Firefox 3、Safari 3、Opera 9.5 和 Google Chrome 中测试了这个，所有这些都在 Windows 上，对我来说它们都一样！<p style="font-size:0.6em;">这是一个测试</p> <p style="font-size:60%;">这是一个测试</p> (2认同)

Answer 5

DA.*_*DA. 5

鉴于(差不多？)所有浏览器现在整个页面调整大小,而不仅仅是文本,以前在可访问字体大小调整方面与pxvs %对比em的问题是没有实际意义的.

所以,答案是它可能并不重要.使用适合你的任何东西.

% 很好,因为它允许相对大小调整.

px 很好,因为在使用它时很容易管理期望.

em 在用于布局元素时也很有用,因为它可以允许与文本大小相关的比例大小.

@amn 好吧，请注意这个答案已经有 8 年历史了。这对于互联网来说已经是很长一段时间了。也就是说，像素即使不理想，也仍然不错。大多数（全部？）浏览器在特定设备上充分适应像素字体大小。不过今天，我通常使用 rem 作为测量单位。 (2认同)
@amn 我没有说它们是理想的或有任何真正的主要好处。我只是在回答 OP 的问题。至于力求永恒，如果你能预测8年后网络的未来，你就更有力量！但是我没有时间在这里不断更新我十年来的答案。希望人们有足够的知识来查看答案上的时间戳并考虑到这一点。 (2认同)

归档时间：	17 年，2 月前
查看次数：	43687 次
最近记录：	7 年，5 月前