CSS自定义字体垂直偏移（错误？）

Question

我使用此方法在CSS中使用自定义字体：

@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot');
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'),
         url('Gabriola.woff') format('woff'),
         url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.gabriola {
  font-size: 20px;
  line-height: 20px;
  height: 20px;
  background: red;
}

<div class="gabriola">Some texty text here</div>

每个浏览器都按照自己的方式渲染这些字体，垂直偏移顶部和底部就像这样

我做错了什么？感谢

Answer 1

可能没有你做错的事。以下是一些可能适用的要点，有些可由您控制，有些则不适用。

1. 为了确定，请明确设置vertical-align: baseline。
2. 不同的文件（.eof，.woff，.ttf）本身可能不会定义相同，因此不同的浏览器使用不同的文件并显示差异。
3. 不确定是否有两个src电话搞砸了，但您可以尝试取消第二个：

@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot'),
         url('Gabriola.eot?#iefix') format('embedded-opentype'),
         url('Gabriola.woff') format('woff'),
         url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

这些都是猜测。你将不得不测试＃1,3。如果问题是＃2，我不确定是否有一个优雅的解决方案。

当然，this site上有警告：

  

请注意，字体呈现在不同浏览器和浏览器之间可能会有很大差异   操作系统。许多开发人员经历了如此糟糕的结果   从Windows和Internet Explorer，他们避免使用自定义字体   共。务必仔细检查所有结果   您可以决定质量是否可以接受的浏览器。

<强>更新

This post提供了一些可能解决渲染问题的提示。这适用于Font Squirrel，他特别指出：

  

如果您下载了该套件，则可以尝试重新生成该字体   发电机。我们定期调整发电机   可能会改善字体的提示或渲染。

但他也证实了，

  

不要推卸责任，但最常见的原因是糟糕的原创   字体。

这与我的观点＃2相符。

Answer 2

我有同样的问题，解决方案是使用原始属性重建字体，而不用Hight逻辑字体创建器更改新文件中的任何内容，字体不变并等于原始问题已更正并对齐到包括ie6在内的所有浏览器的完美性是几个小时的工作，但这是你需要一些用户的结果。

http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip

Answer 3

我知道自从OP提出这个问题已经过去了5年，但我发现这个技巧可以正确地对齐文本基线。

基本上，文本容器必须是line-height的内联块：0; 然后，创建一个内联块伪元素，并根据所需的行高设置其高度：

span {
  font-size: 2em;
  background: red;
}
span.baseline-align {
  vertical-align: baseline;
}

span.true-baseline-align {
  display: inline-block;
  line-height: 0;
}
span.true-baseline-align::after {
  content: '';
  display: inline-block;
  height: 1em; // this is where you control line-height
}

<span>Normal text</span>
<br><br>
<span class="baseline-align">With vertical-align: baseline</span>
<br><br>
<span class="true-baseline-align">with trick to really baseline-align</span>

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/