Mac vs. Windows Browser Font Height Rendering Issue
- by cdmckay
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?
