Html CSS 字体大小:相对值与绝对值。使用哪个?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/520939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS font size: relative vs. absolute values. Which to use?
提问by Aron Rotteveel
- What's the best way to size text across browsers?
- What are the advantages and disadvantages of defining font size in pixels / em?
- 跨浏览器调整文本大小的最佳方法是什么?
- 以像素/em 为单位定义字体大小的优缺点是什么?
采纳答案by bobince
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.
对于相对而言,'%' 和 'em' 同样好。
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.
对于绝对值,始终使用“px”。切勿在屏幕上使用“pt”,它仅适用于打印样式表。遗憾的是,'pt' 被认为是字体处理的默认单位,因为在网络上它是最糟糕的选择。
(ETA: Note that since this answer, CSS3 has redefinedthe ‘physical units' so that px
and pt
are always proportional. So this problem no longer matters unless you are concerned about very old browsers.)
(ETA:注意,因为这个答案,CSS3已经重新定义了“物理单元”,使px
和pt
。总是成正比所以这个问题不再是问题,除非您担心很老的浏览器。)
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 shouldbe 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.
有些人不喜欢相对字体大小的“复合”效果。实际上,诀窍是尽可能少地更改字体大小,以避免过多的嵌套。它应该是可以通过使用字体大小关键字“小” /“中” /“XX-大” /等,但不幸的是这种方式,你让没有复合的行为相对到user's首选尺寸行为没有太大的粒度,即使在今天浏览器处理它们的方式之间仍然存在差异。
回答by Philip Morton
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.
此方法尊重用户在浏览器中选择的字体大小,通常设置为 16px。
回答by nickf
Personally I set an absolute font size on the body
and from there set everything as relative to that. eg:
我个人设置了绝对字体大小,body
然后将所有内容都设置为相对字体大小。例如:
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.
缺点是,如果您想更改默认字体大小,而不是标题(例如),则需要更改很多声明。
回答by Alex
A List Apart did an extensive write upon 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.
A List Apart 就字体大小在各种浏览器中的工作原理做了大量的文章。事实证明它比您预期的要复杂,就像 CSS 中的其他所有内容一样。共识似乎倾向于使用 em,因为这使用户可以更好地控制浏览器中的字体大小。
回答by Gumbo
I prefer relative values since the Internet Explorer (< 7?) cannot scale absolute or pixel values.
我更喜欢相对值,因为 Internet Explorer (< 7?) 无法缩放绝对值或像素值。
回答by JeeBee
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).
我见过人们使用的一件事是在正文 CSS 中定义基本字体大小(例如,12pt),然后所有其他字体大小都是其百分比(例如,标题为 140%,小字体为 80%,等等)。
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.
如果您使用 pt ,那么您将根据用户设置的 DPI 在显示上有所不同,但它可能会在用户的控制之下。
If you use px then you'll have problems on very high DPI devices.
如果您使用 px,那么您将在非常高的 DPI 设备上遇到问题。
Em and pt are good for CSS for printing.
Em 和 pt 适合用于打印的 CSS。
There's a lot of do it and see what happens about fonts and CSS.
有很多方法可以做,看看字体和 CSS 会发生什么。
回答by Peter Morris
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.
相对大小文本的一个缺点是当您希望您的网站为固定大小时,但如果可能的话,您确实应该采用更流畅的设计,以便页面调整大小以适应其内容。
回答by Steerpike
Pixels are a fixed size. This means that when viewed on any screen and resolution the text will alwaysbe the same size.
像素是固定大小。这意味着在任何屏幕和分辨率上查看时,文本的大小将始终相同。
Em's are scalable which means that people on different screen sizes and resolutions can generally get a better experience.
Em 是可扩展的,这意味着使用不同屏幕尺寸和分辨率的人通常可以获得更好的体验。
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.
某些浏览器在改变固定字体大小类型(px 和 pt)的大小时存在问题,因此往往不太适合网络字体,因为某些用户可能需要使用屏幕放大镜或仅使用鼠标滚轮来增加字体大小.
Relative font-sizes have a habit of irritating ignorant designers who get irked that the web site doesn't correspond exactlyto 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.
在我看来,安抚应该更了解的设计师并不足以成为在 Web 开发中使用固定字体的理由。
回答by Syntax
Using EM scaling is more versatile with fonts. It is also more accessible.
使用 EM 缩放对字体更加通用。它也更易于访问。
If you haven't worked with this before, a tool like Em Calculatorcan be very useful to understanding how the tag/model works.
如果你以前没有使用过这个工具,像Em Calculator这样的工具对于理解标签/模型的工作原理非常有用。
回答by Abdullah Jibaly
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.
使用相对大小将使您的页面在 iPhone 等移动设备上看起来更好,特别是因为它们在更大的视口上呈现页面,然后将其缩小以适应所需的空间。