CSS：100% 字体大小 - 100% 什么？答案

【问题标题】：CSS: 100% font size - 100% of what?CSS：100% 字体大小 - 100% 什么？
【发布时间】：2011-10-11 19:03:09
【问题描述】：

关于percentage-sized vs other-sized字体有many articles和questions。但是，我无法找出百分比值的参考应该是什么。我知道这是“所有浏览器中的相同大小”。例如，我也读过这个：

百分比 (%)：百分比单位很像“em”单位，除了一些基本差异。首先，当前字体大小等于 100%（即 12pt = 100%）。使用百分比单位时，您的文本仍可完全适应移动设备和可访问性。

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

但是如果你说“ie 12 pt = 100%”，那么这意味着你首先要定义font-size: 12pt。它是这样工作的吗？您首先以绝对度量定义大小，然后将其称为“100%”？没有多大意义，因为许多示例都说它很有用：

body {
  font-size: 100%;
}

那么通过这样做，WHAT 是相对于字体大小的？我注意到我在屏幕上看到的每种字体的大小都不同。例如，Arial 看起来比 Times New Roman 大得多。另外，如果我只是这样做，body size = 100%，that 是否意味着它在所有浏览器上都是一样的？或者只有当我首先定义一个绝对值？

更新，7 月 23 日星期六

我快到了，但请耐心等待。

所以，如果我理解正确的话，% 值与默认浏览器字体大小有关。嗯，这很好，但又给了我几个其他问题：

这个标准尺寸对于每个浏览器版本是否始终相同，还是在版本之间有所不同？
我！找到（见下图）谷歌浏览器的设置（以前从未看过这个！），我看到标准的“serif”、“sans-serif”和“monospace”设置。但是我如何为其他字体解释这个？假设我定义font: 100% Georgia;，浏览器将采用什么尺寸？它会查找衬线的标准尺寸，还是让“Georgia”字体成为浏览器的标准尺寸
在几个网站上我read 诸如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 作为基础）。它是否正确？

谷歌设置：

这就是我认为如果你不以绝对值定义大小的情况可能的样子。

【问题讨论】：

标签： css font-size

【解决方案1】：

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

【讨论】：

所以如果每个浏览器都会有所不同？
是的，每个浏览器都有自己的默认设置，包括字体大小。这就是为什么你通常必须使用 css reset 的原因。
这是不正确的。它是父元素的百分比。您可能会遇到默认字体大小的百分比，因为您的父元素继承了默认字体大小。
@Zectbumo 对，不太准确。但是问题提到了body，而不是任意嵌套的元素，所以答案是正确的，带有一个小星号:)
:-/ 除了它是嵌套的，因为的父级是

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

body {
  font-size: 100%;
}

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

规范说 % 被渲染

相对于父元素的字体大小

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

在这种情况下，我认为这意味着浏览器的设置。

【讨论】：

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

【解决方案4】：

浏览器默认值类似于 Firefox 的 16pt，您可以通过进入 Firefox 选项、单击“内容”选项卡并检查字体大小来进行检查。您也可以对其他浏览器执行相同的操作。

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

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

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

假设我希望所有 div 的字体大小比正文大 10%，我只是这样做：

div {
    font-size: 110%
}

现在任何浏览我的页面的浏览器都会自动使所有 div 比 body 大 10%，应该是 15.4px。

如果我希望所有 div 的字体大小小 10%，我会这样做：

div {
    font-size: 90%
}

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

另外你应该知道，由于 font-size 是继承的，每个嵌套的 div 都会减小 10% 的字体大小，所以：

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

内部 div 的字体大小为 11.34 像素（12.6 像素的 90%），这可能不是预期的。

这有助于解释： http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

【讨论】：

谢谢！这使它更加清晰。但是我仍然想知道在使用 % 时声称“准确性”或“一致性”的文章。如果我正确解释您的答案，这似乎是非常错误的。我已经用一些额外的问题更新了这个问题......
对所提问题的回答（100% of what?）不正确，有几个不准确之处（并非所有元素都继承字体大小），对未问到的问题有注释和意见.
确实必须考虑像素密度。 4K 手机上 100% 的页面会认为它具有数千像素的水平和垂直分辨率。对于具有 NO_SCALE 的 Flash 内容，例如网络应用程序等，控件将很小，尤其是菜单，例如在 LG G3 上。对于某些大小为像素的 HTML 内容也是如此。通过使用完全相对单位或基于 JavaScript 的动态调整大小，必须考虑一种或另一种方式，即像素密度（每英寸像素数）。
确认现代浏览器仍然使用 12pt/16px@96ppi 作为默认值。在相关说明中，您可以使用“rem”而不是“em”来始终相对于根（html 元素或浏览器默认值）缩放特定元素。对于相对大小元素的复杂层次结构很有用。
最好使用em、rem或%等相对单位设置font-size。使用px 将覆盖浏览器的默认字体大小！许多用户指定自定义字体大小以使阅读文本更容易。

【解决方案5】：

font-size 属性值的百分比相对于父元素的字体大小。 CSS 2.1 含糊不清地说明了这一点（指“继承的字体大小”），但 CSS3 Text says 非常清楚。

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

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

例如，input 元素通常在浏览器样式表中进行设置，使其默认字体大小小于复制文本的字体大小。如果你想让字体大小一样，你可以设置

输入{字体大小：100%}

对于body 元素，逻辑上的冗余设置font-size: 100% 经常使用，因为它被认为有助于解决一些浏览器错误（在现在可能已经失去意义的浏览器中）。

【讨论】：

font-size:100% 可以发挥作用的一个实例是 Quirks 模式，其中字体大小不会继承到表格中。使用这种样式，表格确实会获得父字体大小。当然，心智正常的人都不会再使用 Quirks 模式了……

【解决方案6】：

对不起，如果我迟到了，但在您的编辑中，您对 font: 100% Georgia 发表了评论，其他答案没有回复。

font: 100% Georgia 和 font-size:100%; font-family:'Georgia' 之间存在差异。如果这就是速记方法所做的全部，那么字体大小部分将毫无意义。但它也将许多属性设置为默认值：行高变为normal（或大约 1.2），样式（非斜体）和粗体（非粗体）也是如此。

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

【讨论】：

【解决方案7】：

正如您令人信服地展示的那样，font-size: 100%; 不会在所有浏览器中呈现相同的内容。但是，您将在 CSS 文件中设置字体，因此这在所有浏览器中都是相同的（或备用）。

我相信font-size: 100%; 在与基于em 的设计相结合时会非常有用。正如this article 所示，这将创建一个非常灵活的网站。

什么时候有用？当您的网站需要适应访问者的意愿时。以一位老人为例，他将默认字体大小设置为 24 像素。或者有一个小屏幕和大分辨率的人，这会增加他的默认字体大小，否则他必须眯着眼睛。大多数网站都会崩溃，但基于 em 的网站能够应对这些情况。

【讨论】：

【解决方案8】：

据我了解，它可以帮助您的内容调整字体系列和字体大小的不同值。从而使您的内容具有可扩展性。至于继承字体大小的问题，我们总是可以通过为元素指定特定的字体大小来覆盖。

【讨论】：

【解决方案9】：

根据所有可追溯到 1996 年的规范，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? */
}

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

参考资料：

【讨论】：