osx - Mac vs. Windows Browser Font Height Rendering Issue -

I am using a custom font and @ font-face tag. In Windows, everything looks great, even if it is from Firefox, Chrome or IE.

On Mac, this is a different story For some reason, the Mac Font Renderer thinks the font is too short.

For example, consider this test code ():

   & 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: die; Color: yellow; Height: 100 pixels; Line-height: 100px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div & gt; Quick brown fox jumped on lazy dogs. & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

Open it on Windows FireFox and Mac Firefox. Use YOUR MOUSE to select it.

On Windows, you will see that it chooses the font entirely

On the Mac, it only selects half the font if you are looking at what it is choosing , You will see that the part is centered instead of the full height of the font.

Is this the way to fix such a big discrepancy?

The font is very small. Windows browsers (and Mac Safari, also in my trial) justify Arohan Price incorrectly, while Firefox and Opera accept it on Mac.

The easiest way to fix this is with TTX, part of it.

Use it like this:

 % ttx bubbleboy-2.ttf [...]% bubbleboy-2.ttx edit  

Change Arohan Prices to 1100 (or whatever works for you):

  & lt; Hhea & gt; & Lt; Table version value = "1.0" /> & Lt; Assent Value = "1100" />  

then rebuild the font:

 % ttx bubbleboy-2.ttx "bubbleboy-2 # 1.tf" compile "Bubbleboy-2.ttx "... ... [...]  

This new font should be fixed; You can check it by opening it in the font book.

If you have problems If you want a more visual picture, try it, though its interface is being warned that instead of barrack, once you've opened the font, double-click on a capital letter; you will see a horizontal ray This will be eaten (wrong) climbing. You can fix climbing in element> font information, then click General Uncheck "scale outline" or climb will be large, but still wrong, however, To modify the font, I recommend TTA at FontForge for small changes in this way because it is less likely to destroy it, which it does not understand.