CSS 字体大小:相对值与绝对值。 使用哪个?

发布于 2024-07-12 14:00:42 字数 1436 浏览 4 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(12

岁月静好 2024-07-19 14:00:42

使用哪个?

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

对于相对数,“%”和“em”同样好。

对于绝对值,请始终使用“px”。 切勿在屏幕上使用“pt”,它仅适用于打印样式表。 遗憾的是,“pt”被认为是字体处理的默认单位,因为在网络上它是最糟糕的选择。

(预计到达时间:请注意,自从这个答案以来,CSS3 重新定义了“物理单位”,因此pxpt 总是成比例的,所以这个问题不再重要,除非您担心非常旧的浏览器。)

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

Which to use?

Both. Relative for main body text that users are going to have to read a lot of (so they'll want to be able to read it comfortably); Absolute for text that has to be sized to match other elements on the page that are sized in pixels, such as images.

For relative, ‘%’ and ‘em’ are equally good.

For absolute, always use ‘px’. Never use ‘pt’ for on-screen use, it is only sensible for print stylesheets. It is a pity that ‘pt’ is considered the default unit for font-handling because on the web it is the worst possible choice.

(ETA: Note that since this answer, CSS3 has redefined the ‘physical units’ so that px and pt are always proportional. So this problem no longer matters unless you are concerned about very old browsers.)

Some people don't like the ‘compounding’ effect of relative font sizes. The trick, really, is to use as few font-size changes as you can, to avoid too many nestings. It should be possible to get the relative-to-user's-preferred-size behaviour without the compounding behaviour by using the font-size keywords ‘small’/‘medium’/‘xx-large’/etc., but unfortunately that way you don't get much granularity, and there are still even today differences between how the browsers handle them.

长梦不多时 2024-07-19 14:00:42

我将字体大小保留为用户选择的默认值,然后使用相对大小:

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

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

I keep the font size as the user's chosen default, then use relative sizing:

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

This method respects the user's choice of font size in their browser, which is usually set to 16px.

笑忘罢 2024-07-19 14:00:42

就我个人而言,我在 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" ? */

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

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

缺点是,如果您想更改默认字体大小,而不是标题(例如),那么需要更改很多声明。

Personally I set an absolute font size on the body and from there set everything as relative to that. eg:

body {
    font-size: 10px;    /* or pt if you want */
}
h1 {
    font-size: 200%;
}

Just try to avoid combining compounded relative sizes:

body {
    font-size: 10px;
}
p {
    font-size: 80%; /* 8px, right? */
}
div {
    font-size: 150%;
}
/* what size is a "div > p" ? */

All the modern browsers have full-page zoom these days, meaning that even sizing your font in pixels is ok.

The benefit to this method is that you can easily size up or down all your text by changing one definition.

The downside is that if you want to change the default font size, but not the headings (for example), then there'd be a lot of declarations to change.

浮世清欢 2024-07-19 14:00:42

A List Apart 对字体大小在各种浏览器中的工作方式进行了大量文章。 事实证明它比您想象的更复杂,就像 CSS 中的其他内容一样。 共识似乎倾向于使用 em,因为这使用户可以更好地控制调整浏览器中的字体大小。

A List Apart did an extensive write up on how font sizes work in various browsers. It turns out to be more complicated than you'd expect, just like everything else in CSS. The consensus seems to tilt toward using ems, since that gives the user more control over adjusting the font size in the browser.

银河中√捞星星 2024-07-19 14:00:42

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

I prefer relative values since the Internet Explorer (< 7?) cannot scale absolute or pixel values.

怀中猫帐中妖 2024-07-19 14:00:42

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

如果您使用 pt,那么根据用户设置的 DPI,您的显示会有所不同,但也许它会在用户的控制之下。

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

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

有很多方法可以做,看看字体和 CSS 会发生什么。

One thing I've seen people use is to define a base font size in the body CSS (e.g., 12pt) and then all other font sizes are percentages of that (e.g., 140% for titles, 80% for small, etc).

If you use pt then you'll have differences in display based upon the user's set DPI, but it will be under the control of the user, perhaps.

If you use px then you'll have problems on very high DPI devices.

Em and pt are good for CSS for printing.

There's a lot of do it and see what happens about fonts and CSS.

千年*琉璃梦 2024-07-19 14:00:42

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

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

If you use absolute sizes then any visually impaired readers might find it hard to read. If you use relative sizes then you are merely specifying which text is larger / smaller than other text on your page, all relative to the user's default text size which might be large (if impaired) or tiny (if a bit weird).

A disadvantage of relative sized text is when you want your website to be fixed sizes, but if possible you should really go with a more fluid design anyway so that the page resizes to accomodate its content.

罗罗贝儿 2024-07-19 14:00:42

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

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

某些浏览器在改变固定字体大小类型(px 和 pt)的大小方面存在问题,因此往往不太适合 Web 字体,因为某些用户可能需要使用屏幕放大器或仅使用鼠标滚轮来增加字体大小。

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

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

Pixels are a fixed size. This means that when viewed on any screen and resolution the text will always be the same size.

Em's are scalable which means that people on different screen sizes and resolutions can generally get a better experience.

Certain browsers have issues altering the size of fixed font-size types (px and pt) and therefore tend not to be very good for web font as some users may need to increase the size of your font using a screen magnifier or just the mouse wheel.

Relative font-sizes have a habit of irritating ignorant designers who get irked that the web site doesn't correspond exactly to their designs.

In my mind, mollifying designers who should know better is not enough of a reason to ever use fixed fonts in web development.

尐籹人 2024-07-19 14:00:42

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

如果您以前没有使用过此工具,像 Em 计算器 这样的工具对于理解如何标签/模型作品。

Using EM scaling is more versatile with fonts. It is also more accessible.

If you haven't worked with this before, a tool like Em Calculator can be very useful to understanding how the tag/model works.

智商已欠费 2024-07-19 14:00:42

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

Using relative sizes will make your page look better on mobile devices such as the iPhone, especially since they render the page on a larger viewport then scale it down to fit in the needed space.

浅笑依然 2024-07-19 14:00:42

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

If you can drop support for IE8 then I suggest using rem units. They are relative units like em but they do not cascade to children elements making them much simpler to work with

em are complex

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

rem are simpler

p {
  font-size: 2.5rem;
  span {
    font-size: 1.5 rem;
    /* font size comes out to 1.5 root em*/
  }
}
下壹個目標 2024-07-19 14:00:42

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

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

然而,当你通过关键字指定字体大小时,IE5也会带来一个问题:相对于其他浏览器,IE5显示的文本大约大一级。

Most of my programming background is desktop applications but I've been reading a fair amount for web development recently, and the books I've come across suggest using a keyword font size specification (small, medium, etc) and then scaling that up or down by percentage or em.

If your font size is specified in px, users of old versions of IE won't be able to override the size of the text, i.e., they won't be able to make it larger or smaller to suit their preferences.

However, IE5 also poses a problem when your font size is specified by keyword: relative to other browsers, IE5 displays the text about one step larger.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文