【问题标题】：Find the absolute font-size of a relative font-size查找相对字体大小的绝对字体大小
【发布时间】：2017-11-08 10:47:22
【问题描述】：

我将 em 与 body {font-size:12px} 结合使用作为我的字体的单位（一个绝对数字，可以是 20px 或 14px...）

这很好，但如果我有多个嵌套的东西，喜欢

h4{
font-size:2em;
}
h4 span{
1.6em;
}
.parent_elementofthespan span.superspan{
font-size:1.3em;
}
.basecamp3rdpartyclass h4.span{
font-size:1.9!important;
...

现在，在计算 .parent_elementofthespan span.superspan 的实际绝对字体大小时，事情变得相当复杂。

除了手动计算之外，是否有机会“看到”工具中的绝对字体大小或其他东西？

【问题讨论】：

我不确定我是否理解正确。您是否需要一个工具，它会告诉 span 或 div 的字体大小？
Chrome 开发者工具（按 F12）。在那里你可以看到计算出来的值。

标签： css

【解决方案1】：

在 Chrome 开发工具中

F12 > 元素 > 计算 > 字体大小

将显示一个像素值。

【讨论】：

类似的步骤也适用于 Firefox 和其他浏览器。

【解决方案2】：

您应该尽可能使用 rem 单位。
rem 是相对于:root 字体大小（HTML 中的html 元素，但它可能是<svg> 或在其他情况下），所以没有硬计算！简而言之，它是没有级联的 em，并且 95% 的时间它是您在 CSS 中所需要的。
它的兼容性是IE9+。

CSSViewer（一个 Firefox/Chrome 扩展程序）比 DevTools/Inspect 更快地检查元素的字体大小（以及其他印刷属性，如字体粗细和行高，还有颜色）。

Chrome extension
原版Firefox extension（多年来一直完美运行，但最后一次更新是 9 年前：它可能无法在几天后推出的 Firefox 57+ 上运行：（RIP）

【讨论】：