CSS 字体大小：相对值与绝对值。使用哪个？ [关闭]

Posted 2023-03-06

【中文标题】CSS 字体大小：相对值与绝对值。使用哪个？ [关闭]

【英文标题】：CSS font size: relative vs. absolute values. Which to use? [closed]

【发布时间】：2010-10-05 23:26:37

【问题描述】：

跨浏览器调整文本大小的最佳方法是什么？ 以像素/em 为单位定义字体大小有哪些优点和缺点？

【参考方案1】：

使用相对大小将使您的页面在 iPhone 等移动设备上看起来更好，特别是因为它们在更大的视口上呈现页面，然后将其缩小以适应所需的空间。

【参考方案2】：

我更喜欢相对值，因为 Internet Explorer (

【参考方案3】：

我个人在body 上设置了一个绝对字体大小，并从那里将所有内容设置为相对于该大小。例如：

body 
    font-size: 10px;    /* or pt if you want */

h1 
    font-size: 200%;

尽量避免组合复合相对大小：

body 
    font-size: 10px;

p 
    font-size: 80%; /* 8px, right? */

div 
    font-size: 150%;

/* what size is a "div > p" ? */

如今，所有现代浏览器都具有整页缩放功能，这意味着即使以像素为单位调整字体大小也可以。

这种方法的好处是您可以通过更改一个定义轻松地放大或缩小所有文本。

缺点是如果你想改变默认字体大小，而不是标题（例如），那么会有很多声明需要改变。

【参考方案4】：

我见过人们使用的一件事是在正文 CSS 中定义基本字体大小（例如，12pt），然后所有其他字体大小都是其百分比（例如，标题为 140%，小字体为 80%，等）。

如果您使用 pt，那么您将根据用户设置的 DPI 在显示上有所不同，但它可能会在用户的控制之下。

如果您使用 px，那么在非常高 DPI 的设备上会出现问题。

Em 和 pt 非常适合用于打印的 CSS。

有很多事情要做，看看字体和 CSS 会发生什么。

【讨论】：

12pt 是一个非常差的基本字体大小：“pt”在屏幕上是一个不一致的单位，只对打印样式表有意义。非常高的 DPI 设备已经在操作系统级别上扩展了所有内容，因此“px”仍然可用。 CSS 标准明确定义“px”不是实际的物理像素！

好点。我总是把它们混在一起。无论如何，我同意另一张海报说使用用户指定的字体大小作为根大小，而不是定义你自己的。

【参考方案5】：

我将字体大小保持为用户选择的默认值，然后使用相对大小：

body 
    font-size: 100%;


p 
    font-size: 1em;


h1 
    font-size: 1.8em;

此方法尊重用户在浏览器中选择的字体大小，通常设置为 16px。

【参考方案6】：

如果您使用绝对尺寸，那么任何有视力障碍的读者都可能会觉得难以阅读。如果您使用相对大小，那么您只是指定哪些文本比页面上的其他文本更大/更小，所有这些都与用户的默认文本大小相关，可能大（如果受损）或小（如果有点奇怪）。

相对大小的文本的一个缺点是当您希望您的网站是固定大小时，但如果可能的话，您确实应该采用更流畅的设计，以便页面调整大小以适应其内容。

【参考方案7】：

像素是固定大小的。这意味着当在任何屏幕和分辨率上查看时，文本将始终保持相同大小。

Em 具有可扩展性，这意味着使用不同屏幕尺寸和分辨率的人通常可以获得更好的体验。

某些浏览器在更改固定字体大小类型（px 和 pt）的大小时存在问题，因此对于网络字体来说往往不是很好，因为某些用户可能需要使用屏幕放大镜来增加字体大小，或者只是鼠标滚轮。

相对字体大小习惯于激怒无知的设计师，他们会因为网站与他们的设计不完全对应而感到恼火。

在我看来，安抚应该更了解的设计师并不足以成为在 Web 开发中使用固定字体的理由。

【参考方案8】：

使用 EM 缩放对字体更加通用。它也更易于访问。

如果您以前没有使用过这个工具，Em Calculator 这样的工具对于了解标签/模型的工作原理非常有用。

【参考方案9】：

A List Apart 做了一个extensive write up 关于字体大小在各种浏览器中的工作方式。事实证明它比你想象的要复杂，就像 CSS 中的其他一切一样。共识似乎倾向于使用 em，因为这让用户可以更好地控制在浏览器中调整字体大小。

【参考方案10】：

我的大部分编程背景都是桌面应用程序，但我最近阅读了大量有关 Web 开发的书籍，而且我遇到的书籍建议使用关键字字体大小规范（小、中等）然后缩放按百分比或 em 向上或向下。

如果您的字体大小以 px 为单位指定，旧版本 IE 的用户将无法覆盖文本的大小，即他们将无法根据自己的喜好将其放大或缩小。

但是，IE5 也有一个问题，当你用关键字指定字体大小时：相对于其他浏览器，IE5 显示的文本大约要大一倍。

【参考方案11】：

使用哪个？

两者兼而有之。相对于用户需要大量阅读的主体文本（因此他们希望能够舒适地阅读）；对于必须调整大小以匹配页面上以像素为单位大小的其他元素（例如图像）的文本的绝对值。

对于相对而言，“%”和“em”同样好。

对于绝对值，请始终使用“px”。永远不要在屏幕上使用“pt”，它只对打印样式表有意义。遗憾的是，'pt' 被认为是字体处理的默认单位，因为在网络上它是最糟糕的选择。

（ETA：请注意，自从这个答案以来，CSS3 有 redefined '物理单位'，因此 px 和 pt 总是成比例的。所以这个问题不再重要，除非你担心非常旧的浏览器。 )

有些人不喜欢相对字体大小的“复合”效果。实际上，诀窍是尽可能少地使用字体大小更改，以避免过多的嵌套。 应该可以通过使用字体大小关键字 'small'/'medium'/'xx-large'/etc 来获得相对于用户的首选大小行为而无需复合行为.，但不幸的是，这样您并没有得到太多的粒度，而且即使在今天，浏览器处理它们的方式仍然存在差异。

【讨论】：

接受了这个答案，因为它是对这个问题的直接回答。 （尽管所有答案都非常有帮助，谢谢！）

'%' 和 'em' 并不一样好。当用户更改基本字体大小时，它们会以不同的方式缩放。我建议将基本字体大小设置为“小”，然后使用百分比。 kyleschaeffer.com/best-practices/…

'%' 和 'em' 之间的区别只是旧版本 MSIE 中的一个错误。如果你使用 `html font-size: 100%' ，它不应该做任何定义，'em' 将与所有其他元素的 '%' 完全相同。

@bobince 请你认为你能帮我解决这个问题吗goo.gl/Yl5qIi

没有正确或错误的字体大小单位。这完全取决于您在项目中需要实现的目标。如果您想要绝对控制或需要“像素完美”结果，则使用像素。另一方面，如果字体大小需要根据屏幕大小进行更改，则通常使用相对单位，如 em 或 rem。它提供了更容易的操作并且需要更少的媒体查询使用。这里有一篇博文kolosek.com/css-relative-font-size 解释了单位之间的区别，如果您需要更多信息，请查看。

【参考方案12】：

如果您可以放弃对 IE8 的支持，那么我建议使用 rem 单位。它们是像 em 这样的相对单位，但它们不会级联到子元素，这使得它们更易于使用

em 很复杂

p 
  font-size: 2.5em;
  span 
    font-size: 1.5 em;
    /* font size comes out to 3.75 root em*/
  

rem 更简单

p 
  font-size: 2.5rem;
  span 
    font-size: 1.5 rem;
    /* font size comes out to 1.5 root em*/