0

我需要为一个网页实现一个设计，其中包括名为“ Abril Fatface ”的谷歌 Webfont 和一些字母间距。

这是我发现一些奇怪行为的地方。

字母t和f似乎忽略了字母空间设置，但前提是它们出现在彼此后面。如果它们在其他字母之间，它们会按预期工作，而且似乎只发生在tandf上。

有人知道为什么会这样吗？

我用浏览器的默认字体 Segoe 或 Arial 尝试了这个，我不确定，它似乎在那里工作正常。这是故意的吗？我不知道有什么原因要删除字母间距，尤其是那里？或者它是一个网络字体错误？

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
.fatface {
  font-family: 'Abril Fatface', serif;
}

.wide-text {
  font-size: 100px;
  letter-spacing: 70px;
}

.small {
  font-size: 40px;
  letter-spacing: 20px
}
<div class="wide-text">
  <div class="fatface">botottle</div>
  <div>botottle</div>
</div>
<hr>
<div class="small">
  <div class="fatface">
    aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo pp qq rr ss tt uu vv ww xx yy zz
  </div>
  <div>
    aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo pp qq rr ss tt uu vv ww xx yy zz
  </div>  
</div>

4

1 回答 1

1

我的猜测是它是连字 - 当我测试它时一切看起来都很好。

* {
font-variant-ligatures: none;
}

应该可以解决问题（或根据需要替换通配符）

于 2018-09-24T12:52:46.210 回答