Calibri 和字母“ti”的 CSS 字体间距问题答案

【问题标题】：CSS font-spacing issue with Calibri and the letters "ti"Calibri 和字母“ti”的 CSS 字体间距问题
【发布时间】：2017-11-16 08:38:20
【问题描述】：

我正在为一家使用 Calibri 作为其品牌主要字体的小型企业构建网站，但在某些网络浏览器中使用此字体时遇到了问题。

在 Google Chrome 和 Opera 中，字母“ti”似乎是连接在一起的。当我申请一些letter-spacing时，它们不会分开。这在 Mozilla Firefox 或 Microsoft Edge 中不会发生。

字体有问题，还是浏览器有问题？有什么办法可以解决吗？

我创建了一个用于测试的 sn-p（或者您可以在 https://codepen.io/whitenoise83/pen/KyXWWL 进行测试）

#site-title {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima,  Arial, sans-serif !important; 
  color: #e00b00; 
  font-size: 6em; 
  font-weight: bold;
  /*letter-spacing: 0.25em;*/
}

&lt;span id="site-title"&gt;Audiomation&lt;/span&gt;

【问题讨论】：

可能是连字..

标签： html css fonts ligature

【解决方案1】：

您可以在 CSS 中使用 font-variant-ligatures: none; 来防止浏览器对某些字符/字母组合使用特殊的连字字符。

另见这篇文章：http://www.cssportal.com/css-properties/font-variant-ligatures.php

#site-title {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima,  Arial, sans-serif !important; 
  font-variant-ligatures: none;
  color: #e00b00; 
  font-size: 6em; 
  font-weight: bold;
  letter-spacing: 0.05em;
}

&lt;span id="site-title"&gt;Audiomation&lt;/span&gt;

【讨论】：

【解决方案2】：

从未见过，但经过一番搜索：也许可以选择字体连字选项？

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures

希望它的帮助;)

【讨论】：

设置font-variant-ligatures: none; 似乎已经成功了。感谢您和 xs0 的评论。
因为这很简单，所以我将首先出现的答案标记为正确。我以前从未遇到过这个连字问题 - 今天我学到了一些新东西。干杯！
我也学到了一些东西，也许以后节省了宝贵的时间^^