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

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

这个道具会在字体导入时调整垂直升序属性。

Answer 2

我知道 OP 提出这个问题已经 5 年了，但我发现了这种让文本基线正确对齐的好方法。

基本上，文本容器必须是行高为 0 的内联块； 然后，你创建一个 inline-block 伪元素并根据你想要的 line-height 设置它的高度：

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 3

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

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

Answer 4

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

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 点相符。