Question

我需要为一个网页设计一个设计，其中包括Google的Web字体“ Abril Fatface ”和一些字母间距。

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

字母t和f似乎忽略了字母空间设置，但前提是它们出现在彼此后面。如果它们位于其他字母之间，它们将按预期工作，并且似乎仅在t和f中发生。

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

我用浏览器的默认字体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>

Answer 1

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

* {
font-variant-ligatures: none;
}

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

字母间距不适用于特定的双字母

1 个答案: