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瀏覽器的近乎通用的默認字體大小。）