研究

从我的搜索中，我能够从＆＃34; Nested  inside a  tag giving different font size＆＃34;生成类似的近期问题。引用CSS-Tricks：

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

但在搜索之后我无法向我的问题提出结果：

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

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;
}

在font-size和This month is March.上设置已应用的CSS font-size的文字的实际高度是多少？

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

Answer 1

由于em是百分比信息，因此您可以通过将各个字体大小相乘来计算最终em。

0.833em * 0.8em = 0.6664em

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

.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 2

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

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

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

16 * 0.833 * 0.8 = 10.6624

将四舍五入为 11px 。

当然，最好自己在<body>标记上设置字体大小，以确定。这种行为的好处是可以更容易地创建流体布局。您只需要增加或减少不同屏幕尺寸的正文字体大小。

Answer 3

文本的实际字体大小高度这个月是三月。

范围的字体大小为0.8 * X，因此X其中0.8em是段落的字体大小。

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

这会产生范围0.64 * Y或SELECT * FROM TABLE_A WHERE Column1 IN ('Code1' /* CODE1 */, 'Code2' /* CODE2 */)

的字体大小

Answer 4

您可以按跨度进行操作

<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字体大小，那么实际高度是多少？

研究

问题

4 个答案: