CSS:100%字体大小-100%是什么?


138

很多 有关百分比大小字体和其他大小字体的文章问题。但是,我找不到百分比值的引用应该是什么。我了解这是“所有浏览器中的尺寸均相同”。我也读了这个,例如:

百分比(%):百分比单位与“ em”单位非常相似,除了一些基本差异。首先,当前字体大小等于100%(即12pt = 100%)。使用百分比单位时,您的文本对于移动设备和可访问性仍然可以完全扩展。

资料来源:http : //kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

但是,如果您说“即12 pt = 100%”,则意味着您首先必须定义font-size: 12pt。那是怎么回事?您首先以绝对尺寸定义尺寸,然后将其称为“ 100%”?这样做没有多大意义,因为许多示例都说:

body {
  font-size: 100%;
}

因此,通过这样做,什么相对于字体大小?我注意到我在屏幕上看到的大小对于每种字体都不同。例如,Arial看起来比Times New Roman大得多。另外,如果我只想做到这一点,机身尺寸为100%,将意味着它会在所有的浏览器一样的吗?还是仅当我首先定义一个绝对值时?

更新,7月23日

我要到达那里,但是请忍受我。

因此,如果我理解正确,%值与默认浏览器字体大小有关。好吧,那很好,但再次给我其他几个问题:

  1. 每个浏览器版本的标准大小是否总是相同,还是在不同版本之间不同?
  2. 一世 !找到(见下图)谷歌浏览器的设置(以前从未看过!),我看到了标准的“ serif”,“ sans-serif”和“ monospace”设置。但是,如何将其解释为其他字体?说我定义font: 100% Georgia;,浏览器将采用什么尺寸?它会为衬线查找标准尺寸,还是将“ Georgia”字体设置为浏览器的标准尺寸?
  3. 在几个网站上,我读到类似的内容Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today。但是从我现在所学的内容来看,我相信您应该选择是调整大小的文本(使用%或em,就像他们在此引号中所建议的那样),或者选择“在浏览器中使用准确,一致的字体大小”(通过使用px或pt为基础)。这样对吗?

Google设置:

Google Chrome浏览器

这是我的东西看起来像,如果你不以绝对值定义大小。

在此处输入图片说明

Answers:


89

浏览器的默认设置类似于Firefox的16pt。您可以通过以下方法进行检查:进入Firefox选项,单击“内容”选项卡,然后检查字体大小。您也可以对其他浏览器执行相同的操作。

我个人喜欢控制网站的默认字体大小,因此在每个页面包含的CSS文件中,我将设置BODY默认值,如下所示:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

现在,我所有HTML标记的字体大小将继承14px的字体大小。

假设我希望所有div的字体大小都比body大10%,我只需这样做:

div {
    font-size: 110%
}

现在,任何浏览我网页的浏览器都将自动使所有div都比正文大10%,这应该是15.4px。

如果我希望所有div的字体大小都小10%,我可以这样做:

div {
    font-size: 90%
}

这将使所有div的字体大小为12.6px。

您还应该知道,因为font-size是继承的,所以每个嵌套的div的字体大小都会减少10%,因此:

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

内部div的字体大小为11.34px(12.6px的90%),这可能不是故意的。

这可以帮助解释:http : //www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage


谢谢!这使它更加清晰。但是我仍然想知道使用%时声称“准确性”或“一致性”的文章。如果我正确地解释了您的答案,这似乎是很错误的。我用一些其他问题更新了这个问题……
2011年

3
所问问题的答案(100%是什么?)是不正确的,存在一些错误(并非所有元素都继承字体大小),并且对未问到的问题有注释和意见。
Jukka K. Korpela 2014年

实际上必须考虑像素密度。大约4K手机页面的100%会认为它具有数千像素的水平和垂直分辨率。对于带有NO_SCALE的Flash内容(例如Web应用程序等),控件将很小,尤其是菜单,例如LG G3上的菜单。对于某些大小为像素的HTML内容也同样如此。必须通过使用完全相对单位或基于JavaScript的动态调整大小来考虑一种或另一种像素密度(每英寸像素数)。
Triynko 2015年

1
确认现代浏览器仍将12pt / 16px @ 96ppi用作默认值。在相关说明中,可以使用“ rem”代替“ em”来始终缩放相对于根的特定元素(html元素或浏览器默认值)。在相对大小的元素的复杂层次结构中可能很有用。
Beejor

这是更好地设置您的font-size使用相对单位,例如emrem%。使用px将覆盖浏览器的默认字体大小!许多用户指定自定义字体大小以使阅读文本更容易。
mfluehr

15

我的理解是,当字体设置如下

body {
  font-size: 100%;
}

浏览器将根据该浏览器的用户设置呈现字体。

规格说明已渲染%

相对于父元素的字体大小

http://www.w3.org/TR/CSS1/#font-size

在这种情况下,我将其表示浏览器设置为什么。


实际上的父母bodyhtml。因此body { font-size: 100%; }将是html的字体大小的100%,而不是浏览器的默认字体大小。通常,这些是相同的,因此您是正确的。但是有时您会看到一条html { font-size: ??? }规则。
chharvey

9

font-size属性值的百分比相对于父元素的字体大小。CSS 2.1对此进行了模糊和混乱的说明(指“继承的字体大小”),但是CSS3 Text 对此非常清楚地说明了这一点。

body元素的父元素是根元素,即html元素。除非在样式表中进行设置,否则根元素的字体大小取决于实现。它通常取决于用户设置。

font-size: 100%在许多情况下,设置是没有意义的,因为如果没有样式表设置其自己的字体大小,则元素将继承其父级的字体大小(导致相同的结果)。但是,覆盖其他样式表(包括浏览器默认样式表)中的设置可能很有用。

例如, input元素通常在浏览器样式表中有一个设置,使其默认字体大小小于复制文本的大小。如果希望使字体大小相同,可以设置

输入{字体大小:100%}

对于该body元素,逻辑上冗余的设置font-size: 100%被相当频繁地使用,因为它被认为有助于防止某些浏览器错误(在现在可能已经失去其重要性的浏览器中)。


3
font-size:100%可以发挥作用的一个实例是在Quirks模式下,在该模式下字体大小不会继承到表中。通过这种样式,表格可以获取父字体大小。当然,没有人在他们的右脑中再使用Quirks模式...
利斯特先生,2014年

4

除非您使用pt或px中的值覆盖它,否则它与默认浏览器的字体大小有关。


因此,如果每个浏览器都不同?
user852091 2011年

2
是的,每个浏览器都有其自己的默认设置,包括字体大小。这就是为什么您通常必须使用CSS重置。
RocketR 2011年

1
这是不正确的。它是父元素的百分比。您可能会遇到默认字体大小的百分比,因为您的父元素继承了默认字体大小。
Zectbumo

@Zectbumo对,不是很精确。但是问题提到body,不是任意嵌套的元素,所以答案是正确的,带有一个小星号:)
RocketR

:-/,因为它是嵌套的,因为<body>的父代是<html>
Zectbumo

4

抱歉,如果我迟到了聚会,但是在您的编辑中,您对作出了评论font: 100% Georgia,其他答案没有答复。

font: 100% Georgia和之间有区别font-size:100%; font-family:'Georgia'。如果这只是速记方法所做的全部,则font-size部分将毫无意义。但这也将许多属性设置为其默认值:行高变为normal(或大约为1.2),样式也一样(非斜体),而权重(非粗体)。

就这样。其他答案已经提到了其他所有提及的内容。


3

正如您令人信服地显示的那样,font-size: 100%;不会在所有浏览器中呈现。但是,您将在CSS文件中设置字体,因此在所有浏览器中都将是相同的(或后备的)。

我相信font-size: 100%;将其与em基于基础的设计结合起来会非常有用。如本文所示,这将创建一个非常灵活的网站。

什么时候有用?当您的网站需要适应访问者的意愿时。例如,一个老人将其默认字体大小设置为24 px。或具有高分辨率的小屏幕的人会增加其默认字体大小,因为否则他必须斜视。大多数站点都会崩溃,但是基于em的站点能够应付这些情况。


1

相对于该字体定义的默认大小。

如果有人在网络浏览器上打开您的页面,则会使用默认字体和字号。


0

据我了解,它可以帮助您的内容根据字体系列和字体大小的不同值进行调整。从而使您的内容具有可扩展性。关于固有字体大小的问题,我们总是可以通过为元素提供特定的字体大小来覆盖。


0

根据追溯到1996年的ALL SPECS的规定,百分比值是font-size指父元素的(计算出的)字体大小。

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

就这么简单。

如果div声明一个相对的字体大小(如ems),或者甚至声明另一个百分比,该怎么办?请参见上面的“计算”。相对单位转换为任何绝对单位。

剩下的唯一问题是,在没有父元素的根元素上使用百分比值时会发生什么:

html {
  font-size: 62.5%; /* 62.5% of what? */
}

在这种情况下,请参阅此问题的“重复”部分。TLDR:根元素上的百分比是指浏览器默认字体大小,每个用户可能会有所不同。

参考文献:

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.