CSS font-size property from Percent to Pixel, How to?

Question

Hello

I want to convert the font-size property value from percent to pixel

lets say I have this html code

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

How to find the equivalent value for font-size: 180%; in pixel?

Thanks

Answer 1

There is no simple answer as font sizes in percents are relative to font size of parent block. I find it easiest to do by hand, manually adjusting the font size pixel by pixel in Firebug.

Answer 2

This may be somewhat tricky to do automatically. Font-size percentages are done against a base value, and that base value is the parent block's font size. This means that font size changes are nested like this:

<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>

And that means that there's almost certainly no easy solution.

If you can be absolutely sure that you don't have any places where percentages are nested (as in my example above) you can simply replace all of the percentages with the base font size multiplied by the percentage.

If you do have a lot of different pages though, you probably can't rely on that. In that case, you're going to have to do some HTML/CSS parsing and go through all of your pages, calculating font sizes for each and every element to get it all right. There's not an easy solution, unfortunately.

I need to ask though, why do you need to do this? As long as you declare a base font size for the page in pixels (in the body tag), there's going to be no functional difference between percentage font sizes and absolute font sizes. If you have a font declaration like this for your body:

body {
  font: 100% font1, font2;
}

then just replace it with:

body {
  font: 16px font1, font2;
}

And unless you have some very unusual requirements, it'll work just as well as replacing all of the font size declarations for the whole page.

(16px is the near-universal default font size for web browsers.)