6

我通过这种方法在我的 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>

每个浏览器都以自己的方式呈现这种字体，垂直偏移顶部和底部像这样 字体渲染

我究竟做错了什么？谢谢

4

4 回答 4

5

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

  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 时遇到了如此糟糕的结果，以至于他们完全避免使用自定义字体。始终确保在所有可以确定质量是否可以接受的浏览器上仔细检查结果。

更新

这篇文章提供了一些关于可能解决渲染问题的提示。这是给字体松鼠的，他特别指出：

如果您下载了该套件，您可以尝试使用生成器重新生成字体。我们对生成器进行定期调整，以改善字体的提示或渲染。

但他也证实，

不要推卸责任，但最常见的原因是原始字体不好。

这与我的第 2 点相符。

于 2012-05-26T13:24:06.407 回答
5

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

于 2017-03-31T16:01:50.503 回答
3

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

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

于 2012-06-01T14:36:44.757 回答
0

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

导入字体时，此道具将调整垂直上升属性。

于 2021-12-05T10:55:44.487 回答