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

我通过以下方法在 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>

Each browser renders this fonts by it's own way with vertical offset top and bottom like this

我究竟做错了什么？谢谢

我知道 OP 提出这个问题已经过去 5 年了，但我发现了这个很好的技术，可以让文本基线正确对齐。

基本上，文本容器必须是行高为 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/ http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/