找到相对字体大小的绝对字体大小

Question

我使用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的实际绝对字体大小时，事情变得相当复杂。

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

Answer 1

Chrome开发工具

F12＆gt;元素＆gt;计算＆gt;字体大小

将显示以像素为单位的值。

Answer 2

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

CSSViewer （一种Firefox / Chrome扩展程序）可以更快地检查字体大小（以及其他排版属性，如字体粗细和线条高度，还有颜色），这些元素一个接一个地放在DevTools / Inspect上。

• Chrome extension
• 最初的Firefox extension（多年来一直运作良好但是最后一次更新是在9年前：它可能无法在几天内用于Firefox 57+ :( RIP）