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

Question

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

Answer 1

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

他们的结论：

  

在ems中调整文本和行高，   在指定的百分比   身体（和一个可选的警告   Safari 2），显示提供   所有的准确，可调整大小的文本   今天常用的浏览器。这是   您可以放入套件中的技术   袋子和用作最佳实践   在CSS中调整满足两者的文本大小   设计师和读者。

Answer 2

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

  

％：某些浏览器无法处理   font-size的百分比，但解释   150％为150px。 （一些NN4版本，   例如。）IE也有问题   嵌套元素的百分比。它   似乎IE使用百分比相对于   视口而不是相对于   父元素。还有一个问题   （尽管根据W3C是正确的   规格），在Moz / Ns6中，你不能使用   相对于没有的元素的百分比   指定的高度/宽度。

     

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

     

pt：两者之间差异很大   决议，不应该使用   用于显示。这是非常安全的   打印使用虽然。

     

px：唯一可靠的绝对单位   屏幕。这可能是错误的   但是，作为一个解释   点通常由几个组成   像素，因此一切都变成了   可笑的小。   

Answer 3

两者都相对于它的大小来调整字体大小。 1.5em与150％相同。唯一的优势似乎是可读性，选择最适合的人。

Answer 4

鉴于（几乎？）所有浏览器现在整个页面调整大小，而不仅仅是文本， px 与％ vs. em 在可访问的字体大小调整方面相当没有实际意义。

所以，答案是它可能没关系。使用适合你的任何东西。

  

％很不错，因为它允许相对调整大小。

     

px 很不错，因为在使用它时管理期望相当容易。

     

em 在用于布局元素时非常有用，因为它可以允许与文本大小相关的比例大小调整。

Answer 5

当您使用它而不是字体大小时，真正的区别显而易见。设置 1em 的 padding 与 100％不同。 em 始终相对于font-size。但％可能与字体大小，宽度，高度有关，可能还有其他一些我不知道的事情。

Answer 6

关于css单位％和 em 之间的区别。

据我所知（至少在理论上/概念上，但可能不是这两个单元如何在浏览器中实现）这两个单位是等价的，即如果你将 em 值乘以<代码> 100 然后用％替换 em 它应该是一回事吗？

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

（我想在我的意见中添加这个评论，即在＆lt; Liam，在2008年9月25日11：21＆lt; 回答的答案下方缩进，因为我也想知道为什么他的答案被低估了，但我无法弄清楚如何把我的评论放在那里因此不得不写这个“线程全球”回复）

Answer 7

正如Galwegian所提到的，px对于网页排版来说是最可靠的，因为你在网页上做的其他事情大部分都是针对计算机显示器进行布局的。绝对大小的问题是某些浏览器（IE）不会缩放网页上的像素值元素，因此当您尝试缩放进/出时，一切都在调整，除了那些元素。

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

Answer 8

Yahoo用户界面库（ http://developer.yahoo.com/yui/ ）有一套很好的基本css类，用于”重置“。浏览器特定设置，以便所有（支持）浏览器显示网站的基础相同。

使用YUI时，应该使用百分比。