Geek Answers Handbook

Mac font issue versus Windows Browser

I use my own font and @ font-face tag. On Windows, everything looks great, regardless of whether Firefox, Chrome or IE.

On a Mac, this is a completely different story. For some reason, the Mac font renderer thinks the font is much 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 in Windows Firefox and on Mac Firefox. Use the mouse to select it.

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

On a Mac, he selects only half the font. If you look at what he chooses, you will see that this part was centered, not the full height of the font.

Can this rather large discrepancy be corrected?

+7
windows browser font-face macos
source share
3 answers

The font lift is too small. Windows browsers (and Mac Safari, too, in my testing) simply throw away the climbing value as incorrect, while Firefox and Opera on Mac accept it.

The easiest way to fix this is ttx, part of FontTools .

Use it as follows:

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

Change the climbing value to 1100 (or something works for you):

  <hhea> <tableVersion value="1.0"/> <ascent value="1100"/>

Then create a font:

 % ttx bubbleboy-2.ttx Compiling "bubbleboy-2.ttx" to "bubbleboy-2#1.ttf"... [...]

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

If you need a more visual picture of the problem, try FontForge , but be careful, its interface is pretty baroque. After you open the font, double-click the capital letter; You will see a horizontal line bisecting the glyph. This is the (wrong) climb. You can fix the ascent in Element> Font Info, then click "General". Uncheck the "Large-scale contours" checkbox, or the ascent will be larger, but it will still be an error .:-)

However, to change the font, I would recommend ttx over FontForge for small changes like this because it is less likely to destroy what it does not understand.

+7
source share

I was able to fix my font by loading the TTF version into FontSquirrel and selecting the Expert option and then saving all the default values ​​of the option. The one that fixes it, I believe, is "Fix Vertical Metrics".

Now the font line height does the same on MAC and PC. Good luck.

+3
source share

In fact, Windows is the culprit. The Windows ClearType font renderer actually clogs the font shape within pixel boundaries to make it more understandable, while Mac OS does not touch the font shape (which I really prefer). This often leads to “higher” or “thinner” glyphs on the screen, while on Mac OS you get the true look of the font, as the designer intended.

Here's an article by Jeff Atwood explaining the differences. In any case, you cannot get around this.

http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html

-3
source share

More articles:


All Articles