3

我想将字体大小属性值从百分比转换为像素

假设我有这个 html 代码

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

如何找到字体大小的等效值：180%；以像素为单位？

谢谢

4

2 回答 2

7

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

于 2009-09-02T09:37:28.950 回答
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 {
  font: 100% font1, font2;
}

然后只需将其替换为：

body {
  font: 16px font1, font2;
}

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

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

于 2009-09-02T17:00:26.680 回答