自定义字体与OS之间不同的垂直度量 [英] custom fonts with differrent 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

编辑：不幸的是，作为新用户，我无法发布图片，因此这里是说明：

unfortunately as a new user I cannot post images, so here is a description:

问题是字体基线和它下面的元素之间的距离。在我的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. Any kind of help would be very much appreciated!

推荐答案

字体有三组嵌入垂直度量信息。一组用于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/VerticalMetrics推荐

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