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

Posted 2023-03-06

技术标签:

【中文标题】如果 和 标签都有 em 字体大小，那么实际高度是多少？【英文标题】：If a and tag both have an em font-size what is the actual height? 【发布时间】：2017-07-30 15:21:09 【问题描述】：

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

研究

从我的搜索中，我能够从“Nested  inside a  tag giving different font size”中产生一个类似的最近的问题，该问题引用了CSS-Tricks：

"em 单位是基于计算值的相对单位父元素的字体大小。这意味着子元素是总是依赖于他们的父母来设置他们的字体大小。”

但我在搜索后无法对我的问题产生结果：

[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 高度是多少？

我之所以问是因为我很想知道这个等式，如果我想要没有 标签的相同高度？当 和 标签都应用了高度时，是否有公式来确定最终的字体大小？

【问题讨论】：

如果你想避免进行奇怪的计算，你总是可以使用 REM。我知道这不是您的问题/疑问的答案，但确实值得一看 caniuse 和 Mozilla Developer Network 【参考方案1】：

文本的实际字号高度是多少这个月是三月。

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

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

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

【讨论】：

【参考方案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>

【讨论】：

【参考方案3】：

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

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

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

16 * 0.833 * 0.8 = 10.6624

四舍五入到 11px。

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

【讨论】：

【参考方案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>

【讨论】：

以上是关于如果 和 标签都有 em 字体大小，那么实际高度是多少？的主要内容，如果未能解决你的问题，请参考以下文章

jquery after()和append()区别

span标签间距

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

研究

问题