Question

这是我在Safari 8.0.6中遇到的一个非常奇怪的错误，当Safari渲染单词/字母组合'fit'时，它会忽略CSS'字母间距'属性。我用自定义的webfont观察了这一点，但也用Arial观察到了这一点（不能用'Times'重现）。

http://jsfiddle.net/aaronpruzaniec/hqt7bs0y/2/

<span style="letter-spacing:15px;font-family:times;">Every word will have 15px letter spacing exept for the word: fit, for no apparent reason. xxfitxx fitness</span>
<br>
<br>
<span style="letter-spacing:15px;font-family:arial;">Every word will have 15px letter spacing exept for the word: fit, for no apparent reason. xxfitxx fitness</span>

Answer 1

免责声明：我在这里没有特定版本的Safari进行测试，所以这个答案可能无法正确解决问题，在这种情况下我道歉。
此外，该问题也出现在某些版本的Chrome中，并且这些解决方案似乎在不同版本中的工作方式不同。所以要仔细测试！

问题是在某些字体中，某些字母组合被替换为连字字形。这通常是为了提高渲染质量，但在这种情况下，它会逆流。

解决方案：关闭结扎替换这可以使用现代font-variant-ligatures属性或较早的font-feature-settings属性来完成。或者你可以尝试两个......

＆＃13;

p {letter-spacing:1em; font-family:'DejaVu Sans', 'Times New Roman';}
.ffs {-webkit-font-feature-settings:"liga" 0;
              font-feature-settings:"liga" 0;}
.fvl {-webkit-font-variant-ligatures: none;
              font-variant-ligatures: none;}

＆＃13;

<p>fit fisticuffs fluffie offline</p>
<p class="ffs">fit fisticuffs fluffie offline</p>
<p class="fvl">fit fisticuffs fluffie offline</p>
<p class="ffs fvl">fit fisticuffs fluffie offline</p>

＆＃13;

希望这有帮助！正如我所说，我无法使用Safari 8进行测试;我唯一的Safari（5）没有显示问题，但旧的Chrome版本可以。这些风格都有效果。

Safari 8.0.6使用字母组合忽略CSS字母间距属性：'fit'

1 个答案: