为什么我的font-face会在基线处添加空间？

Question

我的字体做的很奇怪.似乎在字体下面添加了空格(不是边距),将其推高到行高以上.如果我调整高度,它似乎固定在线高的底部,所以不是增加下面的空间而是实际上将字体的顶部推到线高以上.有没有办法,保存添加边距或填充到顶部,以确保它锚定到行高或中间的顶部？

CSS:

@font-face {font-family: 'AvenirLTStd-Book';src: url('/us/_media/font/2CA9EF_0_0.eot');src: url('/us/_media/font/2CA9EF_0_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_0_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_0_0.woff') format('woff'),url('/us/_media/font/2CA9EF_0_0.ttf') format('truetype');}
@font-face {font-family: 'AvenirLTStd-Black';src: url('/us/_media/font/2CA9EF_1_0.eot');src: url('/us/_media/font/2CA9EF_1_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_1_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_1_0.woff') format('woff'),url('/us/_media/font/2CA9EF_1_0.ttf') format('truetype');}

h1,h2,h3,h4,h5,h6 {
    font-family:'AvenirLTStd-Black', Arial, sans-serif;
    margin-top: 0;
    font-weight: normal;
    line-height: 1em;
    color: inherit;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    letter-spacing:1px;
}

Answer 1

我知道这是旧的,但我想我会留下评论其他人谷歌搜索这个问题.

看起来您正在使用MyFonts.com中的Avenir,它允许您"调整"您的webfont包.

我有与上面相同的问题,更改线高度调整以使用边界框(匹配字形的边界框,线间隙将始终为0)修复问题

我使用了以下屏幕截图中的设置:

https://www.dropbox.com/s/9cwhtngo99yozj7/Screen%20Shot%202015-06-19%20at%2011.56.17.png?dl=0

Answer 2

我在这方面已经有一段时间了，因为我没有 Myfonts.com 帐户，而且字体是由 FontsQuirrel 生成或从 GF 下载的免费字体，所以我不得不进行试验。相比之下，在 PS 中，我的字体看起来是正确的，

蒙特塞拉特 vs Open Sans

但是 webfont 是完全关闭的。

我被迫测试了几种字体编辑软件。首先，我测试了FontForge并且根本无法找出正确的指标，然后我试用了FontCreator，它具有这个强大的功能，可以自动计算在 FontForge 中输入时可以解决问题的指标。

但是，每分钟支付 79.00 美元来解决这个问题并且不再使用该软件似乎不可行，而且我也不想在两者之间来回获取指标。我继续玩FontForge，终于找到了解决方案。您必须将所有值重置为 0，Element -> Font Info -> OS/2 -> Metrics然后取消选中“Is Offset”

相反，这里的另一张图片是展示如何解决此问题的简短视频

http://take.ms/rJpqh

请注意，对于某些字体，最好取消选中真正使用 Typo 指标，这对我的情况有所帮助。

Answer 3

您错过的属性是“vertical-align”，它可能会导致所有麻烦这告诉浏览器在哪里对齐文本
它具有以下值（未列出所有值）：

• 基线
• 子
• 极好的
• 中间
• 顶部
• 底部

点击这里了解更多