CSS 中的字体大小 - % 还是 em？
在 CSS 中设置字体大小时，应该使用百分比值 (%) 还是 em？ 能解释一下优点吗？
When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
两者都根据实际情况调整字体大小。 1.5em 与 150% 相同。 唯一的优点似乎是可读性，选择你最舒服的。
Both adjust the font-size relative to what it was. 1.5em is the same as 150%. The only advantage seems to be readability, choose whichever you are most comfortable with.
来自http://archivist.incutio.com/viewlist/css-discuss/1408
From http://archivist.incutio.com/viewlist/css-discuss/1408
当您不将其用于字体大小时，真正的区别就会显现出来。 将
padding设置为1em与100%不同。em始终与字体大小相关。 但%可能与字体大小、宽度、高度以及可能其他一些我不知道的东西有关。The real difference comes apparent when you use it not for font-sizes. Setting a
paddingof1emis not the same as100%.emis always relative to the font-size. But%might be relative to font-size, width, height and probably some other things I don't know about.鉴于（几乎？）所有浏览器现在都会调整整个页面的大小，而不仅仅是文本的大小，之前的问题是
px与%与em< /code> 在可访问的字体大小调整方面是相当没有意义的。所以，答案是，这可能并不重要。 使用任何对你有用的东西。
Given that (nearly?) all browsers now resize the page as a whole, rather than just the text, previous issues with
pxvs.%vs.ems in terms of accessible font resizing are rather moot.So, the answer is that it probably doesn't matter. Use whatever works for you.
正如 Galwegian 提到的，px 对于网页排版来说是最可靠的，因为您在页面上所做的所有其他操作大部分都是参考计算机显示器进行布局的。 绝对大小的问题是某些浏览器 (IE) 不会缩放网页上的像素值元素，因此当您尝试放大时，除了这些元素之外，一切都会调整。
我不知道 IE8 是否可以正确处理这个问题，但所有其他浏览器供应商都可以很好地处理像素，并且用户需要放大/缩小文本的情况仍然是少数（SO 上的这个文本框可能是例外）。 如果你真的想变得更脏，你总是可以添加一个 javascript 函数来增大文本大小，并向用户提供一个“小”/“更大”按钮。
As Galwegian mentions, px is the most reliable for web typography, as everything else you do on the page is mostly laid out in reference to a computer monitor. The problem with absolute sizes is that some browsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoom in/out, everything adjusts except for those elements.
I do not know whether IE8 handles this properly, but all other browser vendors handle pixels just fine and it is still a minority case where a user needs to enlarge/diminish text (this text box on SO perhaps being the exception). If you want to get really dirty, you could always add a javascript function for making your text size larger and offer a "small"/"larger" button to the user.
关于css单位
%和em之间的区别。据我了解（至少在理论上/概念上，但可能不是这两个单位在浏览器中的实现方式），这两个单位是等效的，即如果您将
em值乘以100然后用%替换em应该是一样的吗？如果 em 和 % 之间确实存在一些真正的区别，那么有人可以解释它（或提供解释的链接）吗？
（我想将我的评论添加到它所属的位置，即在
“Liam，于 2008 年 9 月 25 日 11:21 回答”的答案下方缩进，因为我也想知道为什么他的答案被否决了，但我不知道如何将我的评论放在那里，因此不得不写这个“线程全局”回复）Regarding the difference between the css units
%andem.As far as I understand (at least theoretically/conceptually, but possibly not how these two units might be implemented in browsers) these two units are equivalent, i.e. if you multiply your
emvalue with100and then replaceemwith%it should be the same thing ?If there actually is some real difference between em and % then can someone explain it (or provide a link to an explanation) ?
(I wanted to add this comment of mine where it would belong, i.e. indented just below the answer by
"Liam, answered Sep 25 '08 at 11:21"since I also want to know why his answer was downvoted, but I could not figure out how to put my comment there and therefore had to write this "thread global" reply)Yahoo 用户界面库 (http://developer.yahoo.com/yui/) 有一组很好的基本 css 类，用于“重置”浏览器特定设置，以便显示所有（支持的）浏览器的站点都是相同的。
对于 YUI，应该使用百分比。
Yahoo User Interface library (http://developer.yahoo.com/yui/) has a nice set of base css classes used to "reset" the browser specific settings so that the basis for displaying the site is same for all (supported) browsers.
With YUI one is supposed to use percentages.
A List Apart 上有一篇关于网页排版的非常好的文章。
他们的结论是：
There's a really good article on web typography on A List Apart.
Their conclusion: