Question

我在OS X 10.10.3上运行Safari 8.0.5。

每当使用字符＆＃34; f＆＃34;时，我都会遇到字母间距问题。和＆＃34;我＆＃34;紧挨着。我的猜测是这是一个Safari漏洞，我已经将它提交给了苹果公司，但也希望看看我是否能在同一时间找到解决方法。

HTML输出短语＆＃34;鱼很大＆＃34;用两种不同的字体。为了突出这个问题，我在每个字符之间添加了10px的字母间距。

HTML：

<div class="p1">
    The fish is large
</div>
<div class="p2">
    The fish is large
</div>

CSS：

div { letter-spacing: 10px; margin-bottom: 10px; }

div.p1 { 
    color: #009900;
    font-family: Helvetica;
}
div.p2 {
    color: #000099;
    font-family: Arial;
}

这就是我在Safari中输出的内容：

Safari Letter Spacing Issue

出于测试目的，我在＆＃34; f＆＃34;之间添加了HTML注释。和＆＃34;我＆＃34;字符，这似乎有效：

<div class="p1">
    The f<!----->ish is large
</div>

像这样输出：

HTML Comment Version

虽然技术上有效，但它对我来说并不是一个理想的解决方案，因为这里的内容实际上是由WYSIWYG编辑器生成的。

似乎问题只出在＆＃34; f＆＃34;和＆＃34;我＆＃34;彼此紧挨着。我不确定这些字母在Safari中是否具有特殊含义，但它在英语中是一个非常常见的字母序列，所以他们真的不应该有这么小的关键字。

我也尝试添加这个：

 -webkit-font-feature-settings: "kern";

这确实推动了＆＃34; s＆＃34;在右边，但是＆＃34; f＆＃34;和＆＃34;我＆＃34;仍然聚集在一起。

webkit font features

大写＆＃34; F＆＃34;没有同样的问题：

Capitalized F

＆＃34; fi＆＃34;之后的角色似乎并不重要。我可以将其改为其他任何东西，它仍然有同样的问题。

Other letters after fi

如果＆＃34; fi＆＃34;它也会做同样的事情。出现在中间词：

fi mid-word

我已经确认这个问题似乎也存在于运行最新版Safari的iPhone 6 Plus上，所以我怀疑它只是我的最终目的。

为了说明问题，我已经创建了一个jsfiddle，其中包含必要的HTML和CSS，希望能够在您的最终重现该问题。 https://jsfiddle.net/38keruv7/4/

是否有任何想法可以让我的客户在WYSIWYG编辑器中插入HTML注释？

我想我可以在输出数据之前扫描并替换该特定组合，但在处理更大的数据块时，这似乎是对服务器资源的相当低效的使用。

Answer 1

看起来你发现了一个Safari bug。加入＆＃34; fi＆＃34;是typographic ligature。 CSS3有一个font-variant-ligatures属性，可用于控制它们; Safari使用-webkit前缀支持它。看起来-webkit-font-variant-ligatures: no-common-ligatures;解决了这个问题，至少在Safari 8.0.3中是这样的：

div {
    -webkit-font-variant-ligatures: no-common-ligatures;
    letter-spacing: 10px;
    margin-bottom: 10px;
}

这是一个更新的小提琴：https://jsfiddle.net/38keruv7/5/

如果您仍然遇到问题，请参阅rendering: optimizeSpeed;也解决问题的相关问题：Letters Connected in Safari

使用＆＃34; f＆＃34;时的Safari字距调整问题和＆＃34;我＆＃34;

1 个答案: