Css 游猎中的信

我字体中的某些字符正在连接到相邻字符。这种行为出现在Safari 7.0.4和Chrome 35.0.x中；它不存在于Firefox中。下面是该行为的屏幕截图

这个问题是“F”和“i”粘在一起。我可以通过使用

-webkit字体功能设置在Chrome中防止这种情况：“liga”0，但这在Safari中没有效果（这正是我试图“修复”的）

与不同浏览器中的字体呈现引擎的行为不同有关

愚蠢的解决方法是只添加字母间距：

letter-spacing: 1px; // feel free to get crazy in how you decide what spacing value to use.

智能修复是检测safari并添加字母间距




最好的解决方法是使用一种良好的web标准字体，而这种字体不会出现此问题





更新：我注意到你的“F”后面的空格和其他字符后面的空格不一样。这让我怀疑你的字体文件是否有问题。但无论如何，像这样的事情怎么样：

<h1>E<span>ff</span>iciently</h1>

h1 { letter-spacing: 4px; }
h1 span { letter-spacing: 6px; }

高效
h1{字母间距：4px；}
h1跨距{字母间距：6px；}
与不同浏览器中的字体呈现引擎的行为不同有关

愚蠢的解决方法是只添加字母间距：

letter-spacing: 1px; // feel free to get crazy in how you decide what spacing value to use.

智能修复是检测safari并添加字母间距




最好的解决方法是使用一种良好的web标准字体，而这种字体不会出现此问题





更新：我注意到你的“F”后面的空格和其他字符后面的空格不一样。这让我怀疑你的字体文件是否有问题。但无论如何，像这样的事情怎么样：

<h1>E<span>ff</span>iciently</h1>

h1 { letter-spacing: 4px; }
h1 span { letter-spacing: 6px; }

高效
h1{字母间距：4px；}
h1跨距{字母间距：6px；}
从您的图像中，它看起来不像是
字母间距问题，因为您的第一个
i
上面没有点。您可以将css属性设置为
公共连字
。尝试将其设置为
无通用连字

编辑：

基于提供的JSFIDLE，将
文本呈现：OptimizeIberability
替换为
文本呈现：optimizeSpeed解决您的问题

在图像的
文本呈现
上，它看起来不像
字母间距
问题，因为您的第一个
i
上没有点。您可以将css属性设置为
公共连字
。尝试将其设置为
无通用连字

编辑：

基于提供的JSFIDLE，将
文本呈现：OptimizeIberability
替换为
文本呈现：optimizeSpeed解决您的问题

在
文本呈现
上，Safari必须使用更好的字体绘制例程；识别字体中定义的字符的字符。也就是说，如果它在默认情况下这样做，则必须有一种方法告诉它不要这样做。请检查以下内容：。替换
文本呈现：优化易读性与
文本呈现：优化速度并且它在Safari中也可以工作。-我已经编辑了我的答案来包含这个解释；识别字体中定义的字符的字符。也就是说，如果它在默认情况下这样做，则必须有一种方法告诉它不要这样做。请检查以下内容：。替换
文本呈现：优化易读性与
文本呈现：优化速度并且它在Safari中也可以工作。-我已经编辑了我的答案以包含这个解释。
字体变体连字：没有常用连字对连接的字母没有影响。还有其他想法吗？你介意把jsbin/jsfiddle放在一起让我们看一看吗？这个解决方案会影响你在Safari中的小提琴吗？我试着用
文本呈现：optimizeSpeed
和删除
文本呈现：优化易读性
，这对我的本地站点或网站没有影响。最终，你的第一个解决方案奏效了，我（无可否认是心不在焉地）忘了在前面的
-webkit-
<代码>-webkit字体变体连字：无通用连字
在safari中解决了这个问题；这是一本书。我可以或你可以编辑你的答案，使解决方案更清楚。再次感谢<代码>字体变体连字：无常用连字对连接的字母没有影响。还有其他想法吗？你介意把jsbin/jsfiddle放在一起让我们看一看吗？这个解决方案会影响你在Safari中的小提琴吗？我试着用
文本呈现：optimizeSpeed
和删除
文本呈现：优化易读性
，这对我的本地站点或网站没有影响。最终，你的第一个解决方案奏效了，我（无可否认是心不在焉地）忘了在前面的
-webkit-
<代码>-webkit字体变体连字：无通用连字
在safari中解决了这个问题；这是一本书。我可以或你可以编辑你的答案，使解决方案更清楚。再次感谢！