Menu
I have been searching for an answer for this for an hour now with no luck.
I am centering text vertically inside the box using the "line-height" CSS property. This is working fine with standard safe fonts and also works fine for ""@font-face"" font embedding on Windows.
On the Mac however, there is a problem with this centering using "@font-face". See: http://cl.ly/QBlE/o
I don't know what to do with this. The only way to fix this to use different line-height for Mac. But as far as I know this is not possible without JavaScript or server side programming and does not seem to be the proper solution for me.
Example (blue box 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;
}
288
Well, Windows and Mac each have their own specification for the ascent and descent values. On a Mac, a font looks for the ascent and descent in something called the HHead table, whereas on Windows, a font looks for these values in the Win table.
Usually this indicates one computer doesn't have the font installed correctly, but it can also be tripped up by force-font settings and programming errors. Most problems can be resolved by installing the correct version of the font or adjusting the overriding system setting.
Apple optimizes their rendering for WYSIWYG (what you see is what you get) when printing. You can see this with bold and italicized text. The difference between bold and non-bold text is more subtle on a Mac whereas on Windows it's much more obvious -- especially at smaller point sizes.
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size. While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.
Instead of using different line heights, try using the font-size-adjust property with a value of auto.
From the W3C:
In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.
193
First, try setting the line-height from px to em.
If that doesn't work, then it could be caused by default styles that are different for each browser. Those default styles could be messing with your styles. So try to use a reset.css in your page.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
