Creating a cross browser icon webfont

问题:

I have been making my own webfont taking as a starting point articles from web designer depot and intridea.

I know different engines render fonts differently and but the issue I'm having is that firefox renders the font higher than chrome - at the size I am displaying the font this is very noticeable (3 or 4 px - which on a button means they're totally misaligned).

I have also referenced Github's octicon documentation - when checking out how octicons compare browser they look great! No noticeable difference as far as I can see. How did they achieve this?

I am using inkscape and have tried a couple of different svg starter templates. Setup is Set width: 1024 and have tried the icons at various sizes with no different outcome. i.e. 512pt square and aligned just under the baseline.

My question is what rules do I need to impliment when creating a webfont to get the smallest difference between browser rendering of the font?

回答1:

This is a complicated question that involves something called vertical metrics. A font has three sets of these. the first set, found in the 'hhea' table, are generally specific to Mac. The other two sets, found in the 'OS/2' table relate to Windows (and Linux). The idea is to get these values equalized. Our Generator has a feature called oddly enough 'Fix Vertical Metrics' which does a best guess at these. Note that Github used the Generator for finishing their icons.

I know this doesn't relate specifically to SVG fonts, but I'm pretty sure this is where your problems lie. Having different vertical metrics values screws up the baselines across platforms.

Some reading:

• http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
• http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
• http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations

回答2:

There's a webapp, icomoon : http://icomoon.io/app/

It make the job pretty well but you have to test the rendering of the different icons.

They offert a lot of icons if you don't want do design everything.

回答3:

I had the same problem, and solved it by manually setting the metrics for all three types.

You can see my working solution with screenshots of the settings here: https://stackoverflow.com/a/20609766/955413

回答4:

I used the Icomoon App to create the Emoji icon font as well as for creating custom icon fonts on a per project basis.

The Icomoon App allows you to do each of the following :

• Get one or more icons from several popular icon fonts
• Upload other fonts, which may be icon fonts but also regular fonts
• Upload SVG files to use as icons
• Combine any number of icons from any number of available fonts
• Set the UNICODE hex value for whichever characters you need
• Export and/or save the font set you create

For more details, see Create webfont with Unicode Supplementary Multilingual Plane symbols.