CSS字体大小属性从Percent到Pixel，如何？

Question

我想将font-size属性值从百分比转换为像素

让我说我有这个HTML代码

     <div style="font-size: 180%;">
              <a href="http://www.example.com"> link </a>
     </div> 

如何找到font-size的等价值：180％; 在像素？

谢谢

Answer 1

没有简单的答案，因为百分比中的字体大小与父块的字体大小有关。 我发现手动操作最容易，在Firebug中逐个像素地手动调整字体大小。

Answer 2

这可能有点难以自动完成。 字体大小百分比是根据基值完成的，该基值是父块的字体大小。 这意味着字体大小更改嵌套如下：

<div style="font-size: 16px;">
  This text has size 16px.
  <div style="font-size: 150%;">
    This text has size 150% * 16px = 24px.
    <div style="font-size: 150%;">
      Because this div is nested, the base value is now 24px. 
      font-size: 100% would mean 24px type.
      So the size of the text here is 150% * 24px = 36px.
    </div>
  </div>
</div>

这意味着几乎肯定没有简单的解决方案。

如果您可以完全确定没有嵌套百分比的任何位置（如上例所示），您可以使用基本字体大小乘以百分比来简单地替换所有百分比。

如果你确实有很多不同的页面，你可能不能依赖它。 在这种情况下，您将不得不进行一些HTML / CSS解析并遍历所有页面，计算每个元素的字体大小以使其正确。 遗憾的是，这并不是一个简单的解决方案。

我需要问一下，为什么你需要这样做？ 只要您为页面声明基本字体大小（在body标签中），百分比字体大小和绝对字体大小之间就没有功能差异。 如果您的身体有这样的字体声明：

body {
  font: 100% font1, font2;
}

然后将其替换为：

body {
  font: 16px font1, font2;
}

除非你有一些非常不寻常的要求，否则它将替换整个页面的所有字体大小声明。

（16px是Web浏览器的近乎通用的默认字体大小。）