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

Posted 2023-02-19

技术标签:

【中文标题】CSS 自定义字体垂直偏移（错误？）【英文标题】：CSS custom font vertical offset (bug?) 【发布时间】：2012-06-01 17:20:48 【问题描述】：

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

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

我做错了什么？谢谢

【问题讨论】：

不确定问题出在哪里，但您是否尝试过使用span 代替？（或任何其他内联元素，而不是块元素） 【参考方案1】：

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

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

【讨论】：

【参考方案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/

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review 谢谢！我改变了我的答案:) 这太天才了！感谢分享这个小技巧:) 注意此解决方案仅适用于单行。如果您的句子跨越多行（可能与网络的响应性质有关），那么它会重叠自身。【参考方案3】：

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

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

【讨论】：

您是说您在“高度逻辑字体创建器”中打开了字体并调整了每个字母的间距，还是您只是打开了字体并使用该应用程序重新导出了它？（考虑使用多个句子）【参考方案4】：

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

vertical-align: baseline

.eof

.woff

.ttf

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 有一个警告：