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

12 回答 12

29

使用哪个？

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

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

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

（ETA：请注意，自从这个答案以来，CSS3重新定义了“物理单位”，因此px并且pt总是成比例的。所以这个问题不再重要，除非你关心非常旧的浏览器。）

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

于 2009-02-06T19:36:53.633 回答
22

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

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

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

于 2009-02-06T16:26:33.407 回答
10

我个人设置了绝对字体大小，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" ? */

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

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

不利的一面是，如果您想更改默认字体大小，而不是标题（例如），那么会有很多声明需要更改。

于 2009-02-06T16:22:30.437 回答
6

A List Apart对字体大小在各种浏览器中的工作方式进行了广泛的撰写。事实证明它比你想象的要复杂，就像 CSS 中的其他一切一样。共识似乎倾向于使用 em，因为这使用户可以更好地控制浏览器中的字体大小。

于 2009-02-06T16:33:45.593 回答
4

我更喜欢相对值，因为 Internet Explorer (< 7?) 无法缩放绝对值或像素值。

于 2009-02-06T16:22:29.953 回答
2

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

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

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

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

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

于 2009-02-06T16:23:37.347 回答
2

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

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

于 2009-02-06T16:27:42.500 回答
2

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

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

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

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

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

于 2009-02-06T16:28:01.953 回答
2

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

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

于 2009-02-06T16:31:43.867 回答
1

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

于 2009-02-06T16:21:58.020 回答
1

如果您可以放弃对 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*/
  }
}
于 2015-03-16T07:22:26.747 回答
0

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

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

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

于 2009-02-06T16:37:57.893 回答