CSS font-size 属性从百分比到像素，如何？答案

【问题标题】：CSS font-size property from Percent to Pixel, How to?CSS font-size 属性从百分比到像素，如何？
【发布时间】：2010-11-24 21:36:18
【问题描述】：

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

假设我有这个 html 代码

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

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

谢谢

【问题讨论】：

与百分比统一的方式相同，您可以使用“em”，但它也是从父块继承的。

标签： html css fonts font-size

【解决方案1】：

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

【讨论】：

谢谢，但 Firebug 是怎么做到的？我不能使用 Firebug，因为我要转换大量 CSS 数据？
我的建议是使用 Firebug 在 Firefox 中打开文档，然后即时编辑
的样式，逐像素更改其字体大小并将其与原始字体匹配- 大小百分比。
谢谢，但我想转换超过 10000 页，所以它需要一个自动解决方案，但谢谢

【解决方案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 是网络浏览器几乎通用的默认字体大小。）

【讨论】：