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

CSS: 100% font size - 100% of what?

提问by user852091

There are manyarticlesand questionsabout percentage-sized vs other-sizedfonts. However, I can not find out WHAT the reference of the percent-value is supposed to be. I understand this is 'the same size in all browsers'. I also read this, for instance:

有很多关于百分比大小与其他大小字体的文章和问题。但是，我无法找出百分比值的参考应该是什么。我知道这是“所有浏览器的大小相同”。我也读过这个，例如：

Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

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

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

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

But if you say "ie 12 pt = 100%", then it means you first have to define font-size: 12pt. Is that how it works? You first define a size in an absolute measure, and then refer to this as '100%'? Does not make a lot of sense, as many samples say it is useful to put:

但是，如果您说“即 12 pt = 100%”，则意味着您首先必须定义font-size: 12pt. 它是这样工作的吗？您首先以绝对度量定义大小，然后将其称为“100%”？没有多大意义，因为许多示例都说放置以下内容很有用：

body {
  font-size: 100%;
}

So by doing this, WHATis the font size relative to? I notice that the size I see on my screen differs for every font. Arial looks way bigger than Times New Roman, for instance. Also, if I would just do this, body size = 100%, would thatmean that it will be the same on all browsers? Or only if I first define an absolute value?

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

UPDATE, SAT JUL 23

更新，7 月 23 日星期六

I am getting there, but please bear with me.

我正在到达那里，但请耐心等待。

So, the % value relates to the default browser font size, if I understand correctly. Well, that is nice but gives me again several other questions:

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

1. Is this standard size always the same for every browser version, or do they vary between versions?
2. I ! found (see image below) the settings for Google Chrome (never looked at this before!), and I see standard "serif", "sans-serif" and "monospace" settings. But how do I interpret this for other fonts? Say I define font: 100% Georgia;, what size will the browser take? Will it look up the standard size for serif, or has the "Georgia" font a standard size for the browser
3. On several websites I readthings like 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. But from what I am learning now I believe that you should actually choose between either resizable text (using % or em, like what they recommend in this quote), or having 'accurate, consistent font-sizes across browsers' (by using px or pt as a base). Is this correct?

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 Settings:

谷歌设置：

This is how I thinkthings couldlook like if you do not define the size in absolute values.

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

采纳答案by b01

The browser default which is something like 16pt for Firefox, You can check by going into Firefox options, clicking the Content tab, and checking the font size. You can do the same for other browsers as well.

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

I personally like to control the default font size of my websites, so in a CSS file that is included in every page I will set the BODY default, like so:

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

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

Now the font-size of all my HTML tags will inherit a font-size of 14px.

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

Say that I want a all divs to have a font size 10% bigger than body, I simply do:

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

div {
    font-size: 110%
}

Now any browser that view my pages will autmoatically make all divs 10% bigger than that of the body, which should be something like 15.4px.

现在，任何查看我页面的浏览器都会自动使所有 div 比正文大 10%，这应该是 15.4px 之类的。

If I want the font-size of all div's to be 10% smaller, I do:

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

div {
    font-size: 90%
}

This will make all divs have a font-size of 12.6px.

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

Also you should know that since font-size is inherited, that each nested div will decrease in font size by 10%, so:

您还应该知道，由于 font-size 是继承的，每个嵌套 div 的字体大小都会减小 10%，因此：

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

The inner div will have a font-size of 11.34px (90% of 12.6px), which may not have been intended.

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

This can help in the explanation: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

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

回答by Jason Gennaro

My understanding is that when the font is set as follows

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

body {
  font-size: 100%;
}

the browser will render the font as per the user settings for that browser.

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

The spec says that % is rendered

规范说 % 被渲染

relative to parent element's font size

相对于父元素的字体大小

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

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

In this case, I take that to mean what the browser is set to.

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

回答by Jukka K. Korpela

A percentage in the value of the font-sizeproperty is relative to the parent element's font size. CSS 2.1 says this obscurely and confusingly (referring to “inherited font size”), but CSS3 Text saysit very clearly.

font-size属性值中的百分比与父元素的字体大小有关。CSS 2.1 含糊不清地说明了这一点（指的是“继承的字体大小”），但 CSS3 Text说得很清楚。

The parent of the bodyelement is the root element, i.e. the htmlelement. Unless set in a style sheet, the font size of the root element is implementation-dependent. It typically depends on user settings.

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

Setting font-size: 100%is pointless in many cases, as an element inherits its parent's font size (leading to the same result), if no style sheet sets its own font size. However, it can be useful to override settings in other style sheets (including browser default style sheets).

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

For example, an inputelement typically has a setting in browser style sheet, making its default font size smaller than that of copy text. If you wish to make the font size the same, you can set

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

input { font-size: 100% }

输入 { 字体大小：100% }

For the bodyelement, the logically redundant setting font-size: 100%is used fairly often, as it is believed to help against some browser bugs (in browsers that probably have lost their significance now).

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

回答by Mr Lister

Sorry if I'm late to the party, but in your edit you make a remark about font: 100% Georgia, which the other answers haven't responded to.

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

There is a difference between font: 100% Georgiaand font-size:100%; font-family:'Georgia'. If that was all the shorthand method did, the font-size part would be meaningless. But it also sets a lot of properties to their default values: the line height becomes normal(or around 1.2), ditto for the style (non-italic) and weight (non-bold).

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

That's all. The other answers already mentioned everything else there was to mention.

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

回答by RocketR

It's relative to default browser font-size unless you override it with a value in pt or px.

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

回答by Tim

As you showed convincingly, the font-size: 100%;will not render the same in all browsers. However, you will set your font face in your CSS file, so this will be the same (or a fallback) in all browsers.

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

I believe font-size: 100%;can be very useful when combining it with em-based design. As this articleshows, this will create a very flexible website.

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

When is this useful? When your site needs to adapt to the visitors' wishes. Take for example an elderly man that puts his default font-size at 24 px. Or someone with a small screen with a large resolution that increases his default font-size because he otherwise has to squint. Most sites would break, but em-based sites are able to cope with these situations.

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

回答by Yochai Timmer

Relative to the default size defined to that font.

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

If someone opens your page on a web browser, there's a default font and font size it uses.

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

回答by Mith

As to my understanding it help your content adjust with different values of font family and font sizes.Thus making your content scalable. As to the issue of inhering font size we can always override by giving a specific font size for the element.

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

回答by chharvey

According to ALL THE SPECS DATING BACK TO 1996, percentage values on font-sizerefer to the parent element's (computed)font-size.

根据ALL THE SPECS DATING BACK TO 1996，百分比值是font-size指父元素的（计算的）字体大小。

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

It's that easy.

就这么简单。

What if the divdeclares a relative font-size, like ems, or even worse, another percentage?? See “computed”above. Whatever absolute unit the relative unit converts to.

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

The only question that remains is what happens when you use a percentage value on the root element, which has no parent:

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

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

In that case, see the “duplicate”of this question. TLDR: percentages on the root element refer to the browser default font size, which might be different per user.

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

References:

参考：

• CSS 1 spec (1996)
• CSS 2.1 spec (2011)
• CSS Fonts Level 3 spec (2013)
• CSS Fonts Level 3 editor's draft (2017)

• CSS 1 规范 (1996)
• CSS 2.1 规范（2011）
• CSS 字体级别 3 规范（2013）
• CSS Fonts Level 3 编辑器草案（2017）