CSS: 100% 字体大小-100% 什么？

关于 百分比大小与其他大小字体有 很多 物品和 问题。然而，我不能找出百分比值的参考应该是什么。我知道这是“所有浏览器的大小相同”。例如，我还读到:

百分比(%) : 百分比单位与“ 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%;
}

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

最新情况，7月23日

我正在努力，但请耐心等待。

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

  1. 对于每个浏览器版本，这个标准大小总是相同的吗? 或者它们在不同版本之间有所不同？
  2. 我！发现(见下图)谷歌浏览器的设置(从来没有看过这个!)，我看到标准的“衬线”，“无衬线”和“单一空间”设置。但是如何将其解释为其他字体呢？假设我定义了 font: 100% Georgia;，浏览器会采用什么尺寸？它会为 serif 查找标准大小，还是为浏览器使用“ 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 Chrome Settinsg

如果你不定义绝对值的大小，这就是我 好好想想东西 可以看起来的样子。

enter image description here

119746 次浏览
小开

它是相对于默认浏览器字体大小的，除非您用 pt 或 px 值覆盖它。

小开

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

如果有人在网页浏览器上打开你的页面，它使用的是默认字体和字体大小。

小开

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

body {
font-size: 100%;
}

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

规范说明了% 被呈现

相对于父元素的字体大小

Http://www.w3.org/tr/css1/#font-size

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

小开
最佳答案

浏览器的默认设置是类似于 Firefox 的16 pt，你可以通过进入 Firefox 选项，点击 Content 选项卡，检查字体大小来进行检查。您也可以对其他浏览器执行同样的操作。

我个人喜欢控制我的网站的默认字体大小，所以在一个 CSS 文件，包含在每一个页面，我将设置身体默认，像这样:

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

现在所有 HTML 标记的 font-size 将继承14px 的 font-size。

如果我希望所有 div 的字体大小比 body 大10% ，我就会这么做:

div {
font-size: 110%
}

现在任何浏览我的网页的浏览器将自动使所有 div 比主体大10% ，这应该是15.4像素左右。

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

div {
font-size: 90%
}

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

另外，你应该知道，因为字体大小是继承的，每个嵌套的 div 将减少10% 的字体大小，所以:

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

内部 div 的字体大小为11.34 px (12.6 px 的90%) ，这可能并非设计初衷。

这有助于解释: Http://www.w3.org/tr/2011/rec-css2-20110607/syndata.html#value-def-percentage

小开

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

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

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

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

Input { font-size: 100% }

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

小开

对不起，如果我来晚了，但在你的编辑，你作了一个关于 font: 100% Georgia的评论，其他的答案没有回应。

font: 100% Georgia和 font-size:100%; font-family:'Georgia'是有区别的。如果这就是所有的速记方法，那么字体大小部分就没有意义了。但是它也将很多属性设置为它们的默认值: 行高变为 normal(大约1.2) ，样式(非斜体)和权重(非粗体)也是如此。

仅此而已，其他的答案已经提到了其他要提到的事情。

小开

正如您令人信服地展示的那样，font-size: 100%;不会在所有浏览器中呈现相同的效果。但是，您将在 CSS 文件中设置字体，因此这在所有浏览器中都是相同的(或者说是退回)。

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

这什么时候有用？当你的网站需要适应访问者的愿望。以一位老人为例，他的默认字体大小是24px。或者有人用一个小屏幕和一个大分辨率，增加了他的默认字体大小，因为他否则不得不眯着眼睛。大多数站点会崩溃，但是基于 em 的站点能够处理这些情况。

小开

据我了解，它有助于您的内容调整与不同的字体家族和字体大小的值。从而使您的内容具有可伸缩性。至于继承字体大小的问题，我们总是可以通过给元素一个特定的字体大小来覆盖。

小开

根据 所有1996年的数据，font-size上的百分比值是指父元素的 (计算)字体大小。

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

就这么简单。

如果 div声明了一个相对字体大小，比如 em，或者更糟糕的是，声明了另一个百分比？见上面的 “计算”。无论相对单位转换成什么绝对单位。

剩下的唯一问题是，如果对没有父元素的根元素使用百分比值，会发生什么情况:

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

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

参考文献:


提交答案