如果 和 标签都有 em 字体大小，实际高度是多少？

Question

正在使用 CSS 在浏览器中进行设计我知道当您编写一段文本时， 标记上设置的 font-size 是一个基于 标签。

研究

根据我的搜索，我能够从“" that references CSS-Tricks:

"The em unit is a relative unit based on the computed value of the font size of the parent element. This means that child elements are always dependent on their parent to set their font-size."

但是我的问题搜索后无法得到结果：

[css] total em size
[css] em size
CSS: 100% font size - 100% of what?

我发现了另一个类似的问题，但没有回答我正在寻找的问题：

Why would the height increase with a smaller font size?

问题

如果你有 HTML:

<p class="foo"><span class="bar">This month is March.</span></p>

与CSS:

.foo {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.833em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
.bar {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.8em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

在  和  上应用 CSS font-size 后，文本 This month is March. 的实际 font-size 高度是多少？

我问是因为我很好奇如果我想要相同的高度而不需要  标签，我想知道方程式？当  和  标签都应用了高度时，是否有确定最终字体大小的公式？

Answer 1

What is the actual font-size height of the text This month is March.

span 的字体大小是 0.8em，所以它是 0.8 * X 其中 X 是段落的字体大小。

该段落也是 0.8em，因此它是 0.8 * Y，其中 Y 是该段落父元素的字体大小。没有关于问题中字体大小的信息。

这使得跨度的字体大小为0.8 * 0.8 * Y或0.64 * Y

Answer 2

因为em是一个百分比信息，所以可以通过将各个字体大小相乘来计算最终的em。

0.833em * 0.8em = 0.6664em

这是否会在浏览器中以准确的方式工作取决于浏览器如何在内部处理字体大小。如果浏览器对 em 所依赖的元素使用 px 中的中间大小表示，那么如果存在舍入误差，您可能会得到略有不同的结果。

.foo {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.833em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
.bar {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.8em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

.bar2 {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.6664em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

<p class="foo"><span class="bar">This month is March.</span></p>
<span class="bar2">This month is March.</span>

Answer 3

一个 em 是与 parent 对象相关的百分比。这意味着任何使用 em 值的文本都将是父文本大小的百分比。

在您的情况下， 的字体大小将是其父项的 83.3%。  字体大小将是 that 的 80%，即 66.64%。

由于您没有指定父字体大小，浏览器将默认为 16px，在 html 元素上设置。所以你的最终像素值将是：

16 * 0.833 * 0.8 = 10.6624

四舍五入为11px.

当然最好在<body>标签上自己设置一个font-size，以防万一。这种行为的好处是创建流畅的布局要容易得多。您只需要针对不同的屏幕尺寸增大或减小 body 上的字体大小。

Answer 4

你可以通过 span

<span style="font-size: 150%;color:#0000ff">macro average ROC</span> 
<span style="font-size: 250%"> > </span> <span style="font-size: 150%;background:#ff00ff">micro average ROC</span>

如果 <p> 和 <span> 标签都有 em 字体大小，实际高度是多少？

If a <p> and <span> tag both have an em font-size what is the actual height?

html

css

font-size

研究

问题