CSS Calibri 和字母 "ti" 的字体间距问题

Question

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

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

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

我已经创建了一个代码片段用于测试（或者您可以在 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;*/
}

<span id="site-title">Audiomation</span>

Answer 1

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

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

希望对您有所帮助 ;)

Answer 2

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

另请参阅这篇文章：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;
}

<span id="site-title">Audiomation</span>

CSS Calibri 和字母 "ti" 的字体间距问题

CSS font-spacing issue with Calibri and the letters "ti"

html

css

fonts

ligature