操作系统之间具有不同垂直指标的自定义字体 [英] custom fonts with different vertical metrics between OS's

问题描述

我正在尝试为要构建的页面添加自定义字体.我的问题是在我的ubuntu开发机器和Windows pc上，字体的垂直对齐方式看起来不一样.

I am trying to include a custom font for a page I am building. My problem is that the font vertical alignment looks different on my ubuntu development machine and on windows pc's.

首先，这是了解问题的图像

First, here are the images to understand the problem

很遗憾，作为新用户，我无法发布图片，因此这里是说明:

问题在于字体基线与其下方元素之间的距离.我的ubuntu机器上有一个无法解释的空白，它不是填充/边距.即使您选择了文本，它看起来也没有对齐.

The issue is the distance between the fonts baseline and the element beneath it. There is an unexplained gap on my ubuntu machine that it's not a padding/margin. Even if you select the text it looks misaligned.

两者均在Chrome上进行了测试，其背后当然是相同的html/css(位于同一页面).在代码和chrome的检查器工具上均无底边距/填充.相同的行高.字体是Museo.两者都加载字体的.woff版本.其他信息，我很乐意提供.

Both tested on Chrome, same html/css behind it of course (it's the same page). No bottom margins/padding both on code and on the inspector tool of chrome. Same line-height. The font is Museo. Both load the .woff version of the font. Any other information, I would be happy to provide.

导入字体的css是:

@font-face {
  font-family: 'Museo-700';
  src: url('path-to-eot');
  src: url('path-to-eot?') format('embedded-opentype'),
       url('path-to-woff') format('woff'),
       url('path-to-ttf') format('truetype');  
}

即使我删除了woff声明并且ttf提供了字体，问题仍然存在.

The problem persisted even when I removed the woff declaration and ttf was providing the font.

我真的迷失了这一点，不知道该怎么做.

I am really lost with this, no idea how I can make it the same.

推荐答案

字体具有三组嵌入式垂直指标信息.一套用于Mac，一套用于PC，另一套通常由* nix使用.这些可能很难同步，但是我们的字体生成器确实尝试使这些值相同.试试看吗?

Fonts have three sets of embedded vertical metrics information. One set for Mac, one set for PC and another set typically used by *nix. These can be difficult to synchronize but our Font-face Generator does try to get these values the same. Give it a try?

http://www.fontsquirrel.com/fontface/generator

来自Google类型团队的更多信息:

More info from the Google type team:

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

这篇关于操作系统之间具有不同垂直指标的自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！