为什么h1和p设置为2em(font-size: 2em)时看起来几乎一样大小,而em是x倍字体大小的单位
Why h1 and p looks almost the same size when you set them to 2em (font-size: 2em) when em is the units of x times of the font size
我有一些带有自定义字体的 HTML 页面,为了让它看起来更好,我通常使用 css 来调整文本的大小,但是当我浏览 document 它们时说 em 是原始字体大小的 x 倍,我觉得很好,这就是我要使用的,但是当我使用它时,结果如下:
* {
font-size: 1.5em;
}
<h1>
Header
</h1>
<p>
Paragraph
</p>
请注意,它显示的结果是 h1
和 p
的大小几乎相同,除了 h1
更厚更暗,但为什么会发生这种情况不是 2em 的意思比原始文本大 2 倍?为什么 h1
缩小而 p
放大?
P.S。为了让结果正确显示我将字体大小设置为 1.5em 而不是 2em 否则它会太大
当您在 em
中设置字体大小时,您是在相对于 parent 元素的字体大小进行设置。
由于两个元素具有相同的父元素,因此它们具有相同的字体大小。
差异是由于它们对其他属性(例如字体粗细)具有不同的值。
您没有根据没有该样式规则的字体大小设置它。 Cascade 不是那样工作的。
as I look through the document they said…
不要相信 W3School! 他们经常出错。
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)
你是对的。它根据 parent 元素的字体大小对其进行缩放。
请确保您已在 css 中声明 body 部分的原始大小。
您也可以在元素上 right-click 并在浏览器中单击 "inspect"。这将揭示正在应用的样式。您可能有一些 font-weight 正在应用于 headers
我有一些带有自定义字体的 HTML 页面,为了让它看起来更好,我通常使用 css 来调整文本的大小,但是当我浏览 document 它们时说 em 是原始字体大小的 x 倍,我觉得很好,这就是我要使用的,但是当我使用它时,结果如下:
* {
font-size: 1.5em;
}
<h1>
Header
</h1>
<p>
Paragraph
</p>
请注意,它显示的结果是 h1
和 p
的大小几乎相同,除了 h1
更厚更暗,但为什么会发生这种情况不是 2em 的意思比原始文本大 2 倍?为什么 h1
缩小而 p
放大?
P.S。为了让结果正确显示我将字体大小设置为 1.5em 而不是 2em 否则它会太大
当您在 em
中设置字体大小时,您是在相对于 parent 元素的字体大小进行设置。
由于两个元素具有相同的父元素,因此它们具有相同的字体大小。
差异是由于它们对其他属性(例如字体粗细)具有不同的值。
您没有根据没有该样式规则的字体大小设置它。 Cascade 不是那样工作的。
as I look through the document they said…
不要相信 W3School! 他们经常出错。
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)
你是对的。它根据 parent 元素的字体大小对其进行缩放。
请确保您已在 css 中声明 body 部分的原始大小。 您也可以在元素上 right-click 并在浏览器中单击 "inspect"。这将揭示正在应用的样式。您可能有一些 font-weight 正在应用于 headers