Amatic SC 字体 - 渲染 'ee'

Question

我在使用 Amatic SC font 时遇到问题，特别是在尝试渲染两个彼此相邻的 'e' 字符时。

正如您在 google 字体页面上看到的那样，它应该是这样的。

然而，在我的网站上我得到了这样的效果：

可能很难看，但是两个'e'字符已经连成了一个字符。突出显示文本时，它们充当一个字符。

另外，如果我打印出像'eeeeeeee'这样的一长串字符，把字母间距拉大，你就可以清楚地看到问题了。

我似乎找不到这方面的任何信息，所以非常感谢您的帮助，因为它很烦人！

Answer 1

我无法发表评论，因为我的代表太低了，但是，我尝试复制您的问题但没有成功：

HTML

<p>
 Where's the beef?<br />
 BEEEEEEEEEEEF
</p>

CSS

@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
body {
  font-family: 'Amatic SC';
  font-size: 40px;
}

您是否有某种代码运行某处可以将 E 组合成一个字符？如果您可以用 codepen 或 fiddle 向我们展示，或者提供重现的步骤，那将对解决您的问题非常有帮助。

Answer 2

我无法重现此错误，但是，此问题（这是一个印刷连字问题）之前是由于某些字体的 Safari 错误而产生的。

尝试为受影响的元素添加样式表：

 -webkit-font-variant-ligatures: no-common-ligatures;
  text-rendering: optimizeSpeed;

您可以在浏览器中使用或不使用这些属性来检查问题是否仍然存在：

如果这两个元素中均未出现问题，则可能意味着您网站上的元素上存在其他属性导致此问题的原因。

编辑了答案，以便我可以将其标记为解决方案

我不完全确定为什么会这样，但在相关标签中添加以下 CSS 解决了这个问题：

-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;

Amatic SC font - Rendering 'ee'