Css @ font-face doesn't align text vertically in all browsers

Question

I must have looked through all google pages, but have not yet found a solution. I have my own font, which I use through css font-face. The font adds additional extras at the bottom depending on the browser and OS that I use. The figure below shows an example with a macro on the left and windows on the right. It looks right on the right (in the windows), and I want it to be the same on the Mac.

@font-face { font-family: universLight; src: url('http://www.viggi.com/fonts/UniversLTStd-Light.otf'); font-weight: normal; font-style: normal; } #button{ font-family: universLight; border: 1px solid black; background: #ccc; } 

The code is located at http://jsfiddle.net/ZDh5h/

Here is what I already know will not work from my research.

• line-height adds padding to the top and bottom, so an extra padding at the bottom is added.
• using different extensions, such as .otf or .ttf, also does not work. Just gives the same results.
• changing the font size also actually does nothing

I often use this font through the site and really don't want to add different CSS sheets for mac vs windows. If someone knows that it is still possible to fix this without adding javascript additional additions, I will be very grateful.

Thanks.

Answer 1

See http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

normal

Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as, We recommend using the value "normal" between 1.0 and 1.2. The calculated value is "normal".

I think that the behavior you observe comes from different “reasonable” values ​​in the browser, since normal is the default value of line-height .

So, specify your value (say line-height: 1.5em; ) to get rid of the differences.