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

Font size in CSS - % or em?

提问by Mats

When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?

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

采纳答案by Glenn Slaven

There's a really good article on web typography on A List Apart.

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

Their conclusion:

他们的结论：

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.

以 em 为单位调整文本大小和行高，并在正文中指定百分比（以及 Safari 2 的可选警告），可以在当今常用的所有浏览器中提供准确、可调整大小的文本。这是一种您可以放在工具包中的技术，并用作在 CSS 中调整文本大小的最佳实践，让设计师和读者都满意。

回答by Galwegian

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

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

%: Some browsers doesn't handle percent for font-size but interprets 150% as 150px. (Some NN4 versions, for instance.) IE also has problems with percent on nested elements. It seems IE uses percent relative to viewport instead of relative to parent element. Yet another problem (though correct according to the W3C specs), in Moz/Ns6, you can't use percent relative to elements with no specified height/width.

em: Sometimes browsers use the wrong reference size, but of the relative units it's the one with least problems. You might find it interpreted as px sometimes though.

pt: Differs greatly between resolutions, and should not be used for display. It's quite safe for print use though.

px: The only reliable absolute unit on screen. It might be wrongly interpreted in print though, as one point usually consist of several pixels, and thus everything becomes ridiculously small.

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

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

pt：不同分辨率差别很大，不宜用于显示。尽管如此，它对于打印使用来说是非常安全的。

px：屏幕上唯一可靠的绝对单位。然而，它可能在打印时被错误地解释，因为一个点通常由几个像素组成，因此一切都变得非常小。

回答by Liam

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.

两者都相对于原来的字体大小进行了调整。1.5em 等于 150%。唯一的优势似乎是可读性，选择你最舒服的。

回答by Bj?rn Tantau

The real difference comes apparent when you use it not for font-sizes. Setting a paddingof 1emis not the same as 100%. 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.

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

回答by DA.

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.

鉴于（几乎？）所有浏览器现在都将页面作为一个整体来调整大小，而不仅仅是文本，之前与pxvs. %vs. ems 在可访问字体调整方面的问题相当没有实际意义。

So, the answer is that it probably doesn't matter. Use whatever works for you.

所以，答案是它可能并不重要。使用任何对你有用的东西。

%is nice because it allows for relative resizing.

pxis nice because it's fairly easy to manage expectations when using it.

emcan be useful when also used for layout elements as it can allow for proportional sizing related to the text size.

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

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

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

回答by user743436

Regarding the difference between the css units %and em.

关于 css 单位%和em.

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 with 100and then replace emwith %it should be the same thing ?

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

If there actually is some real difference between em and % then can someone explain it (or provide a link to an explanation) ?

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

(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)

（我想在它所属的位置添加我的这条评论，即在答案下方缩进，"Liam, answered Sep 25 '08 at 11:21"因为我也想知道为什么他的答案被否决了，但我不知道如何将我的评论放在那里，因此不得不写这个“线程全局”回复）

回答by Christian P.

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 somebrowsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoomin/out, everything adjusts except for those elements.

正如 Galwegian 所提到的，px 是最可靠的网页排版，因为您在页面上所做的一切都主要参考计算机显示器进行布局。绝对尺寸的问题在于某些浏览器 (IE) 不会缩放网页上的像素值元素，因此当您尝试放大/缩小时，除这些元素外，所有内容都会调整。

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.

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

回答by kosoant

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.

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

With YUI one is supposed to use percentages.

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