Question

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

Answer 1

使用哪种？

两者。相对于主体文本，用户将不得不阅读很多（因此他们希望能够舒适地阅读它）;对于必须调整大小以匹配页面上以像素为单位的其他元素（例如图像）的文本的绝对值。

对于亲戚，'％'和'em'同样好。

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

（ETA：请注意，由于这个答案，CSS3有redefined个'物理单位'，所以px和pt总是成比例。所以这个问题不再重要，除非你是关注非常古老的浏览器。）

有些人不喜欢相对字体大小的“复合”效果。实际上，诀窍是使用尽可能少的字体大小更改，以避免太多嵌套。通过使用font-size关键字'small'/'medium'/'xx-large'/ etc，它应该可以获得相对于用户首选大小的行为，而不会出现复合行为但不幸的是，你没有那么多粒度，甚至今天仍然存在浏览器如何处理它们之间的差异。

Answer 2

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

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

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

Answer 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" ? */

现在所有现代浏览器都有全页缩放功能，这意味着即使调整字体大小也是可以的。

此方法的好处是，您可以通过更改一个定义轻松调整所有文本的大小。

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

Answer 4

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

Answer 5

我更喜欢相对值，因为Internet Explorer（＆lt; 7？）无法缩放绝对值或像素值。

Answer 6

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

如果您使用pt，那么您将根据用户设置的DPI在显示方面存在差异，但它可能会受到用户的控制。

如果您使用px，那么您将在非常高的DPI设备上遇到问题。

Em和pt适合CSS打印。

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

Answer 7

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

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

Answer 8

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

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

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

相对字体大小的习惯会让无知的设计师感到恼火，因为他们觉得网站与他们的设计完全不符合

。

在我看来，能够更好地了解的设计师并不足以成为在网络开发中使用固定字体的理由。

Answer 9

使用EM缩放功能对字体更加通用。它也更容易获得。

如果您以前没有使用过此功能，Em Calculator之类的工具对了解标记/模型的工作方式非常有用。

Answer 10

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

Answer 11

如果你可以放弃对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*/
  }
}

Answer 12

我的大多数编程背景都是桌面应用程序，但我最近一直在阅读相当数量的Web开发，我遇到的书籍建议使用关键字字体大小规范（小型，中型等），然后缩放按百分比增加或减少的人数。

如果您的字体大小是在px中指定的，那么旧版IE的用户将无法覆盖文本的大小，即，他们将无法根据他们的喜好使其变大或变小。

但是，当您的字体大小由关键字指定时，IE5也会出现问题：相对于其他浏览器，IE5会显示大约一步的文本。

CSS字体大小：相对于绝对值。哪个用？

12 个答案: