logo标签列表

CSS中的字体大小 - 百分比还是em？

cssfontsfont-size
121

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

2
在我看来，2016年的时候em和%之间没有区别。如果我输入1.2 em，所有现代浏览器都会认为我使用了120%，例如，如果我使用0.7 em，所有现代浏览器都会认为我使用了70%...这是我在CSS中的经验。 - Mahdi Jazini
8个回答
80

关于网页排版，A List Apart上有一篇非常不错的文章。

他们的结论是：

在ems中进行文字大小和行高的调整，并在body标签中指定百分比（对于Safari 2，还需要特殊注意），可以在当前所有主流浏览器上提供准确、可调整大小的文本展示效果。这是一种最佳实践的技术，您可以将其加入工具包，在CSS中使用它来调整文本大小，以满足设计师和读者的需求。

32
实际上，“行高”最好不要加任何单位进行编写。这在规范中是被允许的，并且完全避免了一些令人烦恼的浏览器怪异行为，特别是涉及基于em的行高时。 - Már Örlygsson
19
我希望让大家知道这篇文章是2007年的。自那时起，现代浏览器变得更加普遍，通常默认情况下会放大而不是增加字体大小。因此，“px”变得更加普遍，并且在我看来是一种更好的方法。当然，这是可以争论的，但我个人在项目中遇到了由于嵌套的“em”引起的问题。 - Mohag519
5
@Mohag519 嵌套 em 标签是一个危险的陷阱。 :) - Vishnudev K
@Mohag519，如果使用高像素密度的移动设备，px不会给您提供比预期更小的东西吗？我认为我们不希望我们的网站在移动设备上完全像桌面一样，但是非常微小 ;) - johnb003
@johnb003 这样的移动设备具有比“1”更大的设备像素比。例如，iPhone 4具有物理屏幕宽度为640px，但显示为320个“CSS”像素（DPR=2）。因此，网站看起来不会更小！ - BenMorel
这个回答实际上并没有回答问题，也不符合当前的SO指南。应该接受这个。 - Qwerty
17

两者都根据原来的字体大小进行相对调整。1.5em与150%相同。唯一的优势似乎是可读性，选择自己更舒适的即可。

1
有人能解释一下为什么这个被投票否决吗？这正是我理解em和百分比之间区别的方式。现在使用其中一个没有任何优势。重要的是使用相对于基础字体大小的大小。 - Lee Theobald
3
谢谢Lee，我刚在Windows上的IE6、IE7、Firefox 3、Safari 3、Opera 9.5和Google Chrome浏览器中测试了一下，它们对我来说看起来都是一样的！

这是一个测试

这是一个测试

 - Liam
15

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

%：某些浏览器不支持使用百分比设置字体大小，但会将150％解释为150px。（例如一些NN4版本）。IE在嵌套元素上使用百分比也存在问题。它似乎使用相对于视窗而非父元素的百分比。另一个问题（尽管符合W3C规范），在Moz/Ns6中，不能使用未指定高度/宽度的元素作为参照使用百分比。

em：有时候浏览器会使用错误的参照大小，但在所有相对单位中，问题最少的是em。您可能会发现它有时被解释为像素。

pt：在不同分辨率下差异很大，不应用于屏幕显示。但是对于打印来说相当安全。

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

关于那个pt的事情。我在/.上进行了一场很棒的争论（并输了）。我和你有相同的观点，很高兴知道有人分享这种看法 :) - Vincent McNabb
13
您是真的在说，如果我使用字体大小的百分比，一些Netscape Navigator 4用户可能无法正确查看我的页面吗？ - newbie
5
引用的讨论来自于2002年。这个问题现在还有关联吗？目前是否还有使用em或%时存在问题的浏览器？ - Beni Cherniavsky-Paskin
2
引用浏览器中20年前的错误不是一个有用的答案。 - d512
14

当你不是用它来设置字体大小时，真正的区别就显现出来了。将 padding 设置为 1em 和设置为 100% 是不同的。 em 始终相对于字体大小。但是，% 可能相对于字体大小、宽度、高度以及其他一些我不知道的东西。

6
考虑到（几乎？）所有浏览器现在都调整整个页面的大小，而不仅仅是文本，因此以前有关可访问字体调整的px vs. % vs. em的问题已经不太重要了。
所以，答案可能并不重要。使用适合您的任何方法即可。

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

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

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

1
误导性的答案，特别是对于那些一开始不太了解 CSS 的人来说。尽管 CSS 定义了逻辑像素，这是一个基于无疑匆忙决定以适应十年前 CSS 能力的移动设备的攻击的可怕想法，但至少在默认字体大小方面，像素完全由浏览器和用户自行决定。此外，我们现在有着各种各样的屏幕宽高比（并不总是带有屏幕的设备），分辨率从 240p 到 2400p 不等。在没有 JavaScript 的情况下，在 CSS 中使用像素几乎是无用的。 - Armen Michaeli
2
@amn 嗯，请注意，这个答案已经有8年的历史了。在互联网上，这是一个非常长的时间。尽管如此，如果没有更好的选择，像素仍然可以使用。大多数（全部？）浏览器可以在特定设备上适当地调整像素字体大小。不过，现在我通常会使用rem作为我的计量单位。 - DA.
1
也许我缺少一些东西，但是像素长度有什么好处（如果有的话）？为什么它们“精细”或“理想”？相对于例如 em。除此之外，我认为 SO 上的答案应该努力做到永恒 -- 毕竟它是一个知识库。编程版的维基百科 :) 正如维基百科更新以反映事实一样，SO 的答案也应该如此，这是我的谦虚意见。 - Armen Michaeli
3
@amn 我并没有说它们是理想的或者有任何真正的主要好处。我只是回答了提问者的问题。至于追求永恒，如果你能预测8年后互联网的未来，那太棒了！但我没有时间不断更新十年前的回答。希望人们知道足够重视答案的时间戳并考虑到这一点。 - DA.
0

正如Galwegian所提到的，px是Web排版中最可靠的单位，因为页面上的其他元素都是基于计算机屏幕进行布局的。绝对大小的问题在于一些浏览器（IE）不会缩放网页上的像素值元素，因此当您尝试缩放时，除了这些元素之外，所有内容都会进行调整。

我不知道IE8是否能够正确处理这个问题，但是所有其他浏览器供应商都可以很好地处理像素大小，并且用户需要放大/缩小文本仍然是少数情况（也许是SO上的此文本框选项除外）。如果您想真正做得更好，您可以添加一个Javascript函数来使文本大小变大，并向用户提供“小”/“大”按钮。

1
IE7可以很好地缩放像素值，只要您使用缩放功能。IE6没有缩放功能，只有文本大小调整。由于设计师使用固定像素比例而不是允许页面随文本大小变化重新排版，因此缩放成为一种必需品。 - Mike Dimmick
这仍然是IE6的一个问题，但是话说回来，IE6上几乎所有东西都有问题。虽然过去我因此避免使用px，但整体网页缩放（而不仅仅是文本）的概念已经成为标准，我发现自己更经常使用px。 - DA.
0
关于 CSS 单位 % 和 em 的区别。
据我所知（至少从理论上来说，但可能不是这两个单位在浏览器中的实现方式），这两个单位是等效的。也就是说，如果你将 em 值乘以 100，然后将 em 替换为 %，它应该是相同的吗？
如果实际上 em 和 % 之间确实存在某些真正的差异，那么有人能解释一下吗（或提供解释的链接）？
（我想在 Liam 的回答下面添加我的评论，因为我也想知道他的回答为什么被踩，但我无法弄清楚如何在那里发表评论，因此不得不写这个“全局”回复）
-1
我一直在使用YUI重置，但后来意识到浏览器的文本大小设置无效！如果body上已经设置px，则使用％没有任何意义，因为它会破坏文本大小设置。 - Jason
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接