Question

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

在Google Chrome和Opera中，字母＆＃34; ti＆＃34;似乎加入了。当我申请一些letter-spacing时，他们不会分开。这在Mozilla Firefox或Microsoft Edge中不会发生。

字体有问题，还是浏览器？我能做些什么来解决它吗？

我已经创建了一个测试片段（或者您可以在https://codepen.io/whitenoise83/pen/KyXWWL进行测试）

＆＃13;

#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;*/
}

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

希望它的帮助;）

Calibri的CSS字体间距问题和字母＆＃34; ti＆＃34;

2 个答案: