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

我知道 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/

Answer 2

你可能没有做错任何事情.以下是一些可能适用的要点,有些可以由您控制,有些则不可以.

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,我不确定是否有一个优雅的解决方案.

当然,这个网站上有一个警告:

请记住,不同浏览器和操作系统的字体呈现可能会有很大差异.许多开发人员在Windows和Internet Explorer中遇到如此糟糕的结果,他们完全避免使用自定义字体.务必在所有浏览器上仔细检查您的结果,以确定质量是否可以接受.

更新

这篇文章提供了一些可能解决渲染问题的技巧.这是Font Squirrel,他特别指出:

如果您下载了该套件,则可以尝试使用该生成器重新生成该字体.我们定期调整生成器,这可能会改善字体的提示或渲染.

但他也证实,

不要贬低,但最常见的原因是原始字体不好.

这与我的观点#2相符.

Answer 3

如果有人遇到问题并且不想或无法重建字体，这就是解决方案： https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override

该属性将在导入字体时调整垂直上升属性。