Geek Answers Handbook

Webfonts rendering differently on Windows, Mac, and Linux

This is the first time I am using webfonts on the website I am doing now, and noticed that the bounding boxes of the fonts seem different on Windows and Linux and Mac (same thing on Linux and Mac). This is browser independent, as the same versions of Chrome and Firefox on all operating systems have these differences. Basically, on Windows, there is extra space on top of the character, while on Linux and Mac the bounding character is much closer to the actual top of the character (and, for example, the umlauts are outside the field). This naturally changes the behavior of positions, fields, etc.

The font is currently defined as follows:

  @ font-face {font-family: "FranklinGothicHand"; 
     src: url ('fonts / franklingothichanddemi-webfont.eot'); 
     src: url ('fonts / franklingothichanddemi-webfont.eot? iefix') format ('eot'),
         url ('fonts / franklingothichanddemi-webfont.woff') format ('woff'),
         url ('fonts / franklingothichanddemi-webfont.ttf') format ('truetype'),
         url ('fonts / franklingothichanddemi-webfont.svg # webfontLgJOAlmK') format ('svg'); 
 }

Because of this, for example, I cannot correctly vertically align the decorated header of the article to the first line of the article, since its position is different in different operating systems.

Can anyone think of any solution for this?

+4
source share
3 answers

I looked at it myself the other day, and I came across this site with an explanation of what was going on. http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ The conclusion I got from the article is that the OS renders fonts differently, and the only real fix seems to be , is to massage the font itself to make them deal with various styles of OS rendering. Unfortunately, editing the actual font is probably not an option that I assume.

+3
source

You might find a javascript browser with this plugin (see os.name) http://jquery.thewikies.com/browser/ , and then use this to determine which stylesheet you want to load How to load CSS files using Javascript ?

Fonts are really strange between operating systems, it does not surprise me so much that rendering is incompatible.

+2
source

I just discovered -webkit-font-smoothing: antialiased; - It seems to be great for Safari and Chrome on OSX.

0
source

More articles:


All Articles