字体大小在 CSS -% 或 em?

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

50654 次浏览

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

% : 有些浏览器不能处理 百分比的字体大小,但解释 150% 为150px。(一些 NN4版本, IE 也有问题 在嵌套元素上使用百分比 似乎 IE 使用百分比相对于 而不是相对于 父母因素,还有一个问题 (though correct according to the W3C Specs) ,在 Moz/Ns6中,不能使用 相对于无元素的百分比 指定的高度/宽度。

有时浏览器使用错误 reference size, but of the relative 单位是最少的那个 问题。你可能会发现它 虽然有时候被解释为 px。

彼此之间差别很大 决议,并不应该使用 展览。这是相当安全的 打印使用。

px: The only reliable absolute unit on 屏幕。它可能是错误的 但是在印刷品中被解释为 point usually consist of several pixels, and thus everything becomes 小得离谱。

两者都调整字体大小相对于它是什么。1.5 em 等于150% 。唯一的优势似乎是可读性,选择你最喜欢的。

分开列表上有一篇关于网页排版的很好的文章。

他们的结论是:

大小文本和行高, 上指定的百分比 主体(和一个可选的警告 Safari 2) ,显示提供 准确的,可调整大小的文本 浏览器在今天被普遍使用。这是 你可以把这项技术放进你的工具箱里 包装和使用作为最佳做法 在 CSS 中调整文本大小以满足两者 设计师和读者。

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

我不知道 IE8是否能正确处理这个问题,但是所有其他浏览器厂商都能很好地处理像素,用户需要放大/缩小文本的情况仍然是少数(SO 上的这个文本框可能是个例外)。如果你真的想弄脏,你可以添加一个 javascript 函数,让你的文本大小更大,并提供一个“小”/“大”按钮给用户。

Yahoo 用户界面库(http://developer.yahoo.com/yui/) 有一组很好的基本 css 类,用于“重置”浏览器的特定设置,这样显示站点的基础对于所有(支持的)浏览器都是一样的。

With YUI one is supposed to use percentages.

考虑到这一点(几乎?)所有浏览器现在都可以调整整个页面的大小,而不仅仅是文本大小,以前的 px%em在可访问的字体大小调整方面的问题是没有实际意义的。

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

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

px非常好,因为使用它时很容易管理期望值。

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

Regarding the difference between the css units % and 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 em value with 100 and then replace em with % it should be the same thing ?

如果 em 和% 之间确实有一些真正的区别,那么是否有人能够解释它(或者提供一个到解释的链接) ?

(我想把我的这条评论放在它应该放的地方,也就是在 "Liam, answered Sep 25 '08 at 11:21"的答案下面缩进,因为我也想知道为什么他的答案被否决了,但是我不知道如何把我的评论放在那里,因此不得不写这个“全局线程”的回复)

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