title: Mac vs. Windows Browser Font Height Rendering Issue
body: <p>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.</p>
  
  <p>On Mac, it's a different story.  For some reason, the Mac font renderer thinks the font is a lot shorter than it is.</p>
  
  <p>For example, consider this test code (<a href="http://cdmckay.org/files/font-test/test.html" rel="noreferrer">live example here</a>):  </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;        
          &lt;title&gt;Webble&lt;/title&gt;
          &lt;style type="text/css"&gt;
          @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;
          }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;The quick brown fox jumped over the lazy dog.&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Open it on Windows Firefox and on Mac Firefox.  Use your mouse to select it.  </p>
  
  <p>On Windows, you'll notice it fully selects the font.  </p>
  
  <p>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.</p>
  
  <p>Is there anyway to fix this rather large discrepancy?</p>