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

Question

关于百分比大小与其他大小的字体有很多 文章和问题.但是,我无法找出百分比值的引用应该是什么.我知道这在所有浏览器中都是"相同的尺寸".我也读过这个,例如:

百分比(%):百分比单位与"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%,这是否意味着它在所有浏览器上都是一样的？或者只有我首先定义一个绝对值？

更新,SAT JUL 23

我到了那里,但请耐心等待.

因此,如果我理解正确,%值与默认浏览器字体大小相关.嗯,这很好,但再次给我几个问题:

1. 这个标准尺寸对于每个浏览器版本是否始终相同,或者它们是否因版本而异？
2. 一世 !找到了(见下图)Google Chrome的设置(以前从未看过这个!),我看到标准的"serif","sans-serif"和"monospace"设置.但是我如何解释其他字体呢？假设我定义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或以此为基础).它是否正确？

Google设置:

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

Answer 1

对于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

Answer 2

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

body {
  font-size: 100%;
}

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

该规范称%已呈现

相对于父元素的字体大小

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

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

Answer 3

font-size属性值中的百分比是相对于父元素的字体大小的.CSS 2.1说明这个模糊不清(指"继承的字体大小"),但CSS3 Text 非常清楚地说明了这一点.

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

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

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

输入{font-size:100%}

对于body元素,逻辑冗余设置font-size: 100%经常被使用,因为它被认为有助于防止一些浏览器错误(在浏览器中可能已经失去了它们的意义).

Answer 4

抱歉，如果我参加聚会迟到了，但在您的编辑中，您评论了font: 100% Georgia，其他答案尚未对此做出回应。

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

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

Answer 5

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