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浏览器的近乎通用的默认字体大小。）

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

2 个答案: