CSS中的字体大小-％还是em？

112

在CSS中设置字体大小时，我应该使用百分比值（%）还是em？您能解释一下优势吗？

css fonts font-size

— 垫子
source

1

我认为2016年em和％之间没有区别。如果我输入1.2 em，所有现代浏览器都认为我使用了120％，例如，如果我使用0.7 em，所有现代浏览器都认为我使用了70％...这就是我在CSS中所经历的

— Mahdi Jazini

79

在A List Apart上有一篇关于网络排版的非常好的文章。

他们的结论是：

显示的大小和以ems为单位的行高以及在正文中指定的百分比（以及Safari 2的可选警告）可在当今所有常用的浏览器中提供准确，可调整大小的文本。您可以将这种技术放入工具包中，并将其用作在CSS中调整文字大小的最佳方法，该方法可以使设计人员和读者满意。

— 格伦·斯拉文（Glenn Slaven）
source

29

实际上line-heights写得更好，根本没有任何单元。这是由规范允许的，并且完全避免了某些真烦浏览器怪癖当谈到em基于行的高度

— 月Örlygsson

16

我想让人们知道这篇文章来自2007年。从那时起，现代浏览器变得越来越普遍，并且现代浏览器通常会放大而不是默认增加字体大小。因此，“ px”变得越来越普遍，我认为这是一种更好的方法。当然这是有争议的，但是由于嵌套em，我个人在项目中遇到了问题。

— Mohag519

5

@ Mohag519 em的嵌套是一个危险的陷阱。:)

— Vishnudev K 2014年

@ Mohag519 px不会给您比具有高像素密度的移动设备所期望的要小得多的东西吗？我不认为我们希望我们的网站与台式机完全一样，但在移动设备上却很小；）

— johnb003

@ johnb003这样的移动设备的设备像素比率大于1。例如，iPhone 4的物理屏幕宽度为640px，但显示为320个“ CSS”像素（DPR = 2）。因此网站不会显得更小！

— 本杰明

14

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

％：某些浏览器不处理字体大小的百分比，而是将150％解释为150px。（例如，某些NN4版本。）IE也存在嵌套元素百分比问题。似乎IE使用相对于视口的百分比，而不是相对于父元素的百分比。另一个问题（尽管根据W3C规范是正确的），在Moz / Ns6中，您不能相对于没有指定高度/宽度的元素使用百分比。

em：有时浏览器使用错误的参考尺寸，但是相对单位中的问题最少。您有时可能会发现它被解释为px。

pt：分辨率之间有很大差异，因此不应用于显示。不过，对于打印使用来说是相当安全的。

px：屏幕上唯一可靠的绝对单位。但是，由于一个点通常由几个像素组成，因此在打印中可能会误解，因此所有内容都变得非常小。

— 挪威语
source

关于pt的事情。我对/有很大的争议。关于（失去）。我和您有相同的观点，很高兴知道有人分享这个观点：）

— Vincent McNabb

12

您是否真的在说如果我将百分比用于字体大小，某些Netscape Navigator 4用户可能无法正确查看我的页面？

— 2012年

4

所引用的讨论来自2002年。这仍然有意义吗？是否有任何正在使用em或％bug的浏览器？

— 贝尼·切尔尼亚夫斯基-帕斯金

1

在浏览器中引用20年的bug并不是一个有用的答案。

— d512

7

两者都根据字体大小调整字体大小。1.5em与150％相同。唯一的好处似乎是可读性，选择最适合您的一个。

— 利亚姆
source

有人可以向我解释为什么这被否决吗？这正是我对em和百分比之间区别的理解。如今，使用一个相对于另一个没有任何优势。重要的是您使用相对于基本字体大小的大小。

— Lee Theobald

1

感谢Lee，我刚刚在Windows上的IE6，IE7，Firefox 3，Safari 3，Opera 9.5和Google Chrome浏览器中对此进行了测试，它们在我看来都一样！<p style =“ font-size：0.6em;”>这是一个测试</ p> <p style =“ font-size：60％;”>这是一个测试</ p>

— Liam

7

如果不将其用于字体大小，则真正的区别显而易见。设置padding的1em是不一样的100%。em总是相对于字体大小。但是%可能与字体大小，宽度，高度以及其他我不知道的东西有关。

— 比昂·坦陶
source

5

鉴于（几乎？）所有浏览器现在都调整了整个页面的大小，而不仅是调整文本的大小，以前与pxvs. %vs. ems 有关可调整字体大小的问题相当不切实际。

因此，答案是可能无关紧要。使用对您有用的任何东西。

% 很好，因为它允许相对调整大小。

px 很好，因为在使用期望值时很容易管理期望值。

em 当还用于布局元素时，它可能会很有用，因为它可以允许与文本大小相关的比例大小。

— DA。
source

误导性的答案，尤其是对于一开始对CSS不太了解的人。忽略CSS定义逻辑像素这一事实，这是一个可怕的想法，基于十年前毫无疑问的仓促决定，以适应具有CSS功能的移动设备的冲击，就默认字体大小而言，像素完全由浏览器和用户自行决定，至少。除此之外，我们现在拥有截然不同的屏幕长宽比（并非总是带有屏幕的设备），分辨率范围为240p至2400p。在没有JavaScript的CSS中使用像素几乎没有用。

— AMN

@amn，请注意，这个答案是8岁。那是很长的互联网时间。也就是说，即使不理想，像素仍然可以。大多数（全部？）浏览器在特定设备上都能适当地调整像素字体大小。但是，今天，我通常会使用rem作为度量单位。

— DA。

也许我错过了一些东西，但是如果像素长度有什么好处呢？为什么它们是“优良”或“理想”的？对em，例如。除此之外，我认为关于SO的答案应该努力做到永不过时-毕竟这是一个知识库。程序设计的维基百科:)随着维基百科的更新以反映事实，以我的拙见，答案也应该如此。

— AMN

@amn我不是说他们理想或有任何真正的重大好处。我只是在回答OP的问题。至于永不过时，如果您可以预测从现在起8年后网络的未来，那么您将拥有更多动力！但是我没有时间在这里不断更新我十年来的答案。希望人们有足够的知识来查看答案的时间戳并将其考虑在内。

— DA。

0

关于CSS单位%与的区别em。

据我了解（至少在理论上/概念上，但可能不是在浏览器中如何实现这两个单元），这两个单元是等效的，即，如果将em值乘以100然后替换em，%应该是同一回事？

如果em和％之间确实存在真正的区别，那么有人可以对其进行解释（或提供解释的链接）吗？

（我想将我的评论添加到该评论的所属位置，即缩进到答案的下方，"Liam, answered Sep 25 '08 at 11:21"因为我还想知道为什么他的答案被否决了，但是我无法弄清楚如何将我的评论放在那儿，因此不得不写此“线程全局”回复）

— 用户名
source

-1

正如Galwegian所提到的，px是最可靠的Web排版，因为您在页面上所做的所有其他操作大部分都是参考计算机监视器来进行布局的。绝对大小的问题在于某些浏览器（IE）无法缩放网页上的像素值元素，因此，当您尝试放大 /缩小时，除那些元素外，其他所有内容都会调整。

我不知道IE8是否可以正确处理此问题，但是所有其他浏览器供应商都可以很好地处理像素，这仍然是少数情况，用户需要放大/缩小文本（SO上的此文本框可能是例外）。如果您真的想弄脏，可以随时添加一个javascript函数，以使文本大小变大，并为用户提供“小” /“大”按钮。

— 克里斯蒂安·P。
source

1

如果使用缩放，则IE7可以很好地缩放像素值。IE6没有缩放，只有文本大小。由于设计人员使用固定的像素比例而不是允许页面随着文本大小的变化而重排，因此缩放是一项要求。

— Mike Dimmick

IE6仍然是一个问题，但话又说回来，IE6仍然是所有问题。因此，尽管我过去避免使用px，但网页缩放的整体概念（相对于文本）已成为标准，而且我发现自己使用px的频率更高。

— DA。

-1

Yahoo用户界面库（http://developer.yahoo.com/yui/）具有一组不错的基础CSS类，用于“重置”浏览器特定的设置，以便所有显示该网站的基础都相同（受支持）浏览器。

对于YUI，应该使用百分比。

— Kosoant
source

我一直在使用YUI重置，但随后意识到浏览器的文本大小设置不起作用！如果您在正文上设置了px，则看不到使用％的任何意义，因为它破坏了文本大小设置。

— 杰森