ChatGPT解决这个技术问题 Extra ChatGPT

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

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

百分比 (%):百分比单位很像“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 大得多。另外,如果我只是这样做,body size = 100%,这是否意味着它在所有浏览器上都是一样的?或者只有当我首先定义一个绝对值?

更新,7 月 23 日星期六

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

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

这个标准尺寸对于每个浏览器版本是否总是相同的,还是在版本之间有所不同?我 !找到(见下图)谷歌浏览器的设置(以前从未看过这个!),我看到标准的“serif”、“sans-serif”和“monospace”设置。但是我如何为其他字体解释这个?假设我定义字体:100% Georgia;,浏览器将采用什么尺寸?它会查找衬线的标准大小,还是让“Georgia”字体成为浏览器的标准大小在几个网站上,我读到诸如调整文本大小和以 ems 为单位的行高之类的内容,并在正文中指定百分比 [..] , 被证明可以在当今常用的所有浏览器中提供**准确、可调整大小的文本**。但是从我现在所学的内容来看,我认为您实际上应该在可调整大小的文本(使用 % 或 em,就像他们在此引用中推荐的那样)或具有“跨浏览器的准确、一致的字体大小”(通过使用 px 或pt 作为基础)。这个对吗?

谷歌设置:

https://i.stack.imgur.com/9dR1N.png

如果您不以绝对值定义大小,我认为这就是我认为的样子。

https://i.stack.imgur.com/GomGD.gif


U
Undistraction

浏览器默认值类似于 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.6px。

您还应该知道,由于 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% 是什么?)是不正确的,有几个不准确之处(并非所有元素都继承字体大小),并且有关于未询问的问题的注释和意见。
确实必须考虑像素密度。 4K 手机上 100% 的页面会认为它具有数千像素的水平和垂直分辨率。对于具有 NO_SCALE 的 Flash 内容,例如网络应用程序等,控件将很小,尤其是菜单,例如在 LG G3 上。对于某些大小为像素的 HTML 内容也是如此。通过使用完全相对单位或基于 JavaScript 的动态调整大小,必须考虑一种或另一种方式,像素密度(每英寸像素数)。
确认现代浏览器仍然使用 12pt/16px@96ppi 作为默认值。在相关说明中,您可以使用“rem”而不是“em”来始终相对于根(html 元素或浏览器默认值)缩放特定元素。对于相对大小元素的复杂层次结构很有用。
最好使用 emrem% 等相对单位设置 font-size。使用 px 将覆盖浏览器的默认字体大小!许多用户指定自定义字体大小以使阅读文本更容易。
J
Jason Gennaro

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

body {
  font-size: 100%;
}

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

规范说 % 被渲染

相对于父元素的字体大小

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

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


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

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

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

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

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

输入{字体大小:100%}

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


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

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

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

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


R
RocketR

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


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

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

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

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


c
chharvey

根据ALL THE SPECS DATING BACK TO 1996font-size 上的百分比值是指父元素的 (computed) 字体大小。

<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:根元素的百分比是指浏览器默认字体大小,每个用户可能不同。

参考:

CSS 1 规范 (1996)

CSS 2.1 规范 (2011)

CSS 字体第 3 级规范 (2013)

CSS Fonts Level 3 编辑草稿 (2017)


Y
Yochai Timmer

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

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


M
Mith

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