创建跨浏览器图标webfont [英] Creating a cross browser icon webfont

问题描述

我一直在制作我自己的webfont作为起点的文章网页设计师库和 intridea 。

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

我知道不同的引擎渲染字体不同，但我遇到的问题是firefox渲染的字体高于chrome - 在我显示的字体大小这是非常明显的（3或4 px - 一个按钮上的意思是它们完全不对齐。）

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).

我还引用了 Github的octicon文档 - 当检查如何八进制比较浏览器，他们看起来不错！没有明显的差异，就我所见。 他们是如何实现这一点的？

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?

我使用的是inkscape，并尝试了几个不同的svg初始模板。安装程序设置宽度：1024 ，并尝试了各种尺寸的图标，没有不同的结果。即512pt平方，并且正好在基线下对齐。

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.

我的问题是，当创建webfont时，需要什么规则来获得浏览器渲染之间的最小差异的字体？

推荐答案

这是一个复杂的问题，一个字体有三组这些。第一个集合，在'hhea'表中找到，通常特定于Mac。另外两个集合，在'OS / 2'表中找到与Windows（和Linux）相关。想法是让这些值均衡。我们的生成器有一个功能，称为奇怪的修复垂直指标，这是一个最好的猜测在这些。请注意，Github使用Generator完成他们的图标。

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.

我知道这不与SVG字体，但我很确定这是你的问题所在。

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.

有些阅读：

• 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-高度


• http://code.google.com/ p / googlefontdirectory / wiki / VerticalMetricsRecommendations

• 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

这篇关于创建跨浏览器图标webfont的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！