关于 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%;
}
那么通过这样做,字体大小相对于什么?我注意到我在屏幕上看到的每种字体的大小都不同。例如,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
浏览器默认值类似于 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
我的理解是当字体设置如下
body {
font-size: 100%;
}
浏览器将根据该浏览器的用户设置呈现字体。
规范说 % 被渲染
相对于父元素的字体大小
http://www.w3.org/TR/CSS1/#font-size
在这种情况下,我认为这意味着浏览器的设置。
body
的父级是 html
。所以 body { font-size: 100%; }
将是 html
字体大小的 100%,而不是浏览器的默认值。但是,通常这些是相同的,因此您实际上是正确的。但有时您会看到 html { font-size: ??? }
规则。
font-size
属性值的百分比相对于父元素的字体大小。 CSS 2.1 含糊不清地说明了这一点(指“继承的字体大小”),但 CSS3 Text says 非常清楚。
body
元素的父元素是根元素,即html
元素。除非在样式表中设置,否则根元素的字体大小取决于实现。它通常取决于用户设置。
在许多情况下,设置 font-size: 100%
是没有意义的,因为如果没有样式表设置自己的字体大小,则元素会继承其父级的字体大小(导致相同的结果)。但是,覆盖其他样式表(包括浏览器默认样式表)中的设置可能很有用。
例如,input
元素通常在浏览器样式表中有一个设置,使其默认字体大小小于复制文本的大小。如果你想让字体大小相同,你可以设置
输入{字体大小:100%}
对于 body
元素,经常使用逻辑冗余设置 font-size: 100%
,因为它被认为有助于解决一些浏览器错误(在现在可能已经失去意义的浏览器中)。
font-size:100%
可以发挥作用的一个实例是 Quirks 模式,其中字体大小不会继承到表格中。使用这种样式,表格确实会获得父字体大小。当然,心智正常的人都不会再使用 Quirks 模式了……
抱歉,如果我迟到了,但在您的编辑中,您对 font: 100% Georgia
发表了评论,其他答案没有回复。
font: 100% Georgia
和 font-size:100%; font-family:'Georgia'
之间存在差异。如果这就是速记方法所做的全部,那么字体大小部分将毫无意义。但它也将许多属性设置为其默认值:行高变为 normal
(或大约 1.2),样式(非斜体)和粗体(非粗体)也是如此。
就这样。其他答案已经提到了所有其他要提到的内容。
它与默认浏览器字体大小相关,除非您使用 pt 或 px 中的值覆盖它。
body
,而不是任意嵌套的元素,所以答案是正确的,带有一个小星号:)
正如您令人信服地展示的那样,font-size: 100%;
不会在所有浏览器中呈现相同的内容。但是,您将在 CSS 文件中设置字体,因此这在所有浏览器中都是相同的(或备用)。
我相信将 font-size: 100%;
与基于 em
的设计相结合时会非常有用。如 this article 所示,这将创建一个非常灵活的网站。
这什么时候有用?当您的网站需要适应访问者的意愿时。以一位老人为例,他将默认字体大小设置为 24 像素。或者有一个小屏幕和大分辨率的人,这会增加他的默认字体大小,否则他必须眯着眼睛。大多数网站都会崩溃,但基于 em 的网站能够应对这些情况。
根据ALL THE SPECS DATING BACK TO 1996,font-size
上的百分比值是指父元素的 (computed) 字体大小。
<style>
div {
font-size: 16px;
}
span {
font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>
就这么容易。
如果 div
声明了一个相对字体大小,如 em
s,或者更糟糕的是,另一个百分比?参见上面的“计算”。无论相对单位转换成什么绝对单位。
剩下的唯一问题是当您在没有父元素的根元素上使用百分比值时会发生什么:
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)
相对于为该字体定义的默认大小。
如果有人在网络浏览器上打开您的页面,则会使用默认字体和字体大小。
据我了解,它可以帮助您的内容调整字体系列和字体大小的不同值。从而使您的内容具有可扩展性。至于继承字体大小的问题,我们总是可以通过为元素指定特定的字体大小来覆盖。
不定期副业成功案例分享
em
、rem
或%
等相对单位设置font-size
。使用px
将覆盖浏览器的默认字体大小!许多用户指定自定义字体大小以使阅读文本更容易。