What does font-size:larger do to a font that is 1em?

I'm updating a website that has a lot of sections with the C开发者_如何学JAVASS property font-size:larger.

I'd like to replace this so that it is using EMs instead, because it is more explicit what the size will be.

If font-size:larger is applied to a 1em font, how many EMs is the new font? Something like 1.2em?

As mentioned in W3C CSS2 Fonts document:

<relative-size>
A keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are: [ larger | smaller ]. For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'. If the parent element's size is not close to a table entry, the UA is free to interpolate between table entries or round off to the closest one. The UA may have to extrapolate table values if the numerical value goes beyond the keywords.

And below this, says:

Note 2. In CSS1, the suggested scaling factor between adjacent indexes was 1.5, which user experience proved to be too large. In CSS2, the suggested scaling factor for a computer screen between adjacent indexes was 1.2, which still created issues for the small sizes. Implementation experience has demonstrated that a fixed ratio between adjacent absolute-size keywords is problematic, and this specification does not recommend such a fixed ratio.

According to the SitePoint Reference, your guess is exactly right. Most browsers will increase the font size by a factor of 1.2em, but there is no standard that they do so.

The W3C recommendation is that you use em or % for sizing, because sizing of elements on the page will be in relation to each other, and not rely on an arbitrary convention that may not be used in some less-common browsers.

font-size:larger will cause the font-size of the selected element to be larger then the one from its parent container. The standard font-size of CSS is medium. The actual px or em value depends on the client/browser. Normally it's 1em and a common conversion is 1em = 16px.