Amatic SC 字体 - 渲染“ee”答案

【问题标题】：Amatic SC font - Rendering 'ee'Amatic SC 字体 - 渲染“ee”
【发布时间】：2017-06-07 05:49:36
【问题描述】：

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

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

但是，在我的网站上，我得到了这样的效果：

这可能很难看出，但两个“e”字符已连接在一起成为一个字符。突出显示文本时，它们充当一个字符。

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

我似乎找不到任何关于此的信息，因此非常感谢任何帮助，因为这很烦人！

【问题讨论】：

【解决方案1】：

我无法重现此错误，但as per an older Stack Overflow answer，此问题（这是一个排版连字问题）之前是由于某些字体的 Safari 错误而产生的。

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

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

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

如果问题不存在于任一元素中，则可能意味着您网站上的元素上的某些其他属性导致了此问题。

编辑了答案，所以我可以标记为解决方案

我不完全确定为什么会这样，但是将以下 CSS 添加到相关标签可以解决此问题：

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

【讨论】：

是的，我仍然可以看到它jsfiddle.net/6wu6exbq/3。你没看到这里有双 e 吗？
不，这两个示例对我来说都没有任何共享连字，但是在该示例中它们对您可见是很好的。它们在红色和绿色两行文本中都可见吗？无论哪种方式，这听起来像是一个浏览器问题。您能告诉我您使用的是哪种浏览器吗？
是的，两条线都是可见的。我正在使用 Chrome 58。
我已经添加了更多不同的属性to the JsFiddle - 你还在每一个字符串上看到双 E 吗？如果是这样，除了将浏览器更新到 Chrome 59 之外，我不确定还有什么建议？出于好奇，您的 OSX 语言是否设置为英语以外的语言？
啊！我只看到前两个字符串的效果 - 接下来的三个看起来都符合预期。

【解决方案2】：

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

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 中向我们展示，或提供重现的步骤，这将非常有助于解决您的问题。

【讨论】：