This is really old, but <font size="10">
would be about <p style= "font-size:55px">
This cannot be answered that easily. It depends on the font used and the points per inch (ppi). This should give an overview of the problem.
According to The W3C:
This attribute sets the size of the font. Possible values:
- An integer between 1 and 7. This sets the font to some fixed size, whose rendering depends on the user agent. Not all user agents may render all seven sizes.
- A relative increase in font size. The value "+1" means one size larger. The value "-3" means three sizes smaller. All sizes belong to the scale of 1 to 7.
Hence, the conversion you're asking for is not possible. The browser is not required to use specific sizes with specific size
attributes.
Also note that use of the font
element is discouraged by W3 in favor of style sheets.
In general you cannot rely on a fixed pixel size for fonts, the user may be scaling the screen and the defaults are not always the same (depends on DPI settings of the screen etc.).
Maybe have a look at this (pixel to point) and this link.
But of course you can set the font size to px, so that you do know how many pixels the font actually is. This may help if you really need a fixed layout, but this practice reduces accessibility of your web site.
Using the data points from the accepted answer you can use polynomial interpolation to obtain a formula.
WolframAlpha Input: interpolating polynomial {{1,.63},{2,.82}, {3,1}, {4,1.13}, {5,1.5}, {6, 2}, {7,3}}
Formula: 0.00223611x^6 - 0.0530417x^5 + 0.496319x^4 - 2.30479x^3 + 5.51644x^2 - 6.16717x + 3.14
And use in Groovy code:
import java.math.* def convert = {x -> (0.00223611*x**6 - 0.053042*x**5 + 0.49632*x**4 - 2.30479*x**3 + 5.5164*x**2 - 6.167*x + 3.14).setScale(2, RoundingMode.HALF_UP) } (1..7).each { i -> println(convert(i)) }
the font size to em mapping is only accurate if there is no font-size defined and changes when your container is set to different sizes.
The following works best for me but it does not account for size=7 and anything above 7 only renders as 7.
font size=1 = font-size:x-small
font size=2 = font-size:small
font size=3 = font-size:medium
font size=4 = font-size:large
font size=5 = font-size:x-large
font size=6 = font-size:xx-large
Source: Stackoverflow.com