Why is there a @ font-face font difference on Windows and Mac OS X?

Question

I have been looking for an answer for this for an hour now with no luck.

I align the text vertically inside the field using the CSS property "line height". This works great with standard secure fonts and is great for Windows font-face fonts.

However, on a Mac, there is a problem with this centering using "@ font-face". See: http://cl.ly/QBlE/o

I don’t know what to do with it. The only way to fix this is to use different line heights for the Mac. But, as far as I know, this is not possible without programming in JavaScript or on the server side and does not seem to be a suitable solution for me.

Example (blue square at the top):

#header .login { text-decoration:none; margin:11px 9px 0 9px; float:right; font-size:11px; color:#fff; background:url(../img/header-login.png); width:118px; height:26px; line-height:26px; padding:0 0 0 10px; text-transform:uppercase; font-family: 'Helvetica55', Sans-Serif; } 

Answer 1

Instead of using different line heights, try using the font-size-adjust property with a value of auto .

From W3C :

In situations where font reserve occurs, fallback fonts may not have the same format as the required font family, and therefore appear less readable. The font-size-adjust property is a way to preserve the readability of the text when the font is backed up. He does this by adjusting the font size so that the height x is the same regardless of the font used.

Answer 2

First try setting the line height from px to em.

If this does not work, it may be caused by the default styles, which are different for each browser. These default styles can be used in your styles. So try using reset.css on your page.

Answer 3

The problem is most likely the font used. Each font has its own indicators and, if not optimized, they may differ from one platform to another. See http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/ for a better explanation of this.

You can try changing the font yourself using a tool like http://fontforge.org/ . This is not easy, although it requires some trial and error to fix it. It may also violate the license of the font you are using.

My advice: choose a font that is better optimized for use on the Internet. Take any font from Typekit or the like, and I'm sure you will get more consistent results.

Answer 4

Perhaps "vertical-align:" may help,

please check fiddle

this will explain the difference, I think each browser has a different default value,

here I created 4 different span tags to show the top, middle, bottom and default (unassigned) vertical alignment values,

Please change the values ​​if this helps,

since you are using images in a button, make sure that the image is set to 0 0 ie background:url(../img/header-login.png) no-repeat 0 0;

this will display the image with 0 on the left and 0, which will help you determine if the image was not correctly generated either.

Please answer if the problem is not resolved.

Answer 5

From my experience using multiple web browsers and multi-platform websites, you should really remove the pixels in the fonts and start using ems.

Here's a useful conversion table tool:

http://pxtoem.com/

Let me know if this is still happening using em. Keep in mind also that different fonts have different types of behavior, and the default size (base) may also vary. If you want to make sure that this is exactly the same size, appart from using 'em', you should also use the openType font and paste it into your CSS, having exactly the same font and size on any screen or browser.

Answer 6

Operating systems can create fonts in many ways. You can start from the bottom, while others can start from the top, because their algorithm is different. If the problem was CSS, it would not be resolved by another type of font.

I found another question similar to yours, you can check if it works for your situation: Mac font height display issue vs Windows Browser