0

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

在 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>

4

2 回答 2

3

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

另见这篇文章：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>

于 2017-11-16T00:14:53.683 回答
1

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

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

希望它的帮助;）

于 2017-11-16T00:13:07.590 回答