Mac vs. Windows Browser Font Height Rendering Issue

Posted by cdmckay on Stack Overflow See other posts from Stack Overflow or by cdmckay
Published on 2010-05-18T01:16:25Z Indexed on 2010/05/18 1:20 UTC
Read the original article Hit count: 308

Filed under:

Windows

|

mac

|

font

|

browser

|

web-development

I'm using a custom font and the @font-face tag. In Windows, everything looks great, regardless of whether it's Firefox, Chrome, or IE.

On Mac, it's a different story. For some reason, the Mac font renderer thinks the font is a lot shorter than it is.

For example, consider this test code (live example here):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Webble</title>
        <style type="text/css">
        @font-face
        {
            font-family: "Bubbleboy 2";
            src: url("bubbleboy-2.ttf") format('truetype');         
        }

        body
        {
            font-family: "Bubbleboy 2";
            font-size: 30px;
        }

        div
        {
            background-color: maroon;
            color: yellow;
            height: 100px;
            line-height: 100px;
        }
        </style>
    </head>
    <body>
        <div>The quick brown fox jumped over the lazy dog.</div>
    </body>
</html>

Open it on Windows Firefox and on Mac Firefox. Use your mouse to select it.

On Windows, you'll notice it fully selects the font.

On Mac, it only selects about half the font. If you look at what it is selecting, you'll see that that part has been centered, instead of the full height of the font.

Is there anyway to fix this rather large discrepancy?

Developer IT