Safari 8.0.6忽略具有字母组合：“ fit”的CSS字母间距属性

Question

This is a very strange bug I have encountered in Safari 8.0.6, when Safari renders the word/letter combination 'fit' it ignores the CSS 'letter-spacing' property. I have observed this with a custom webfont, but also with Arial (not reproducible with 'Times').

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

http://imgur.com/1uM6LRw

 <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

Disclaimer: I don't have that particular version of Safari here to test on, so this answer may not solve the issue properly, in which case I apologise.
In addition, the issue appears also in some versions of Chrome, and the solutions seem to work differently in different versions. So test carefully!

The problem is that in some fonts, certain letter combinations are replaced with ligature glyphs. This is normally done to improve the rendering quality, but in this case, it backfires.

Solution: switch off ligature substitution.
This can be done with either the modern font-variant-ligatures property or the older font-feature-settings one. Or you can try both...

 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;} 

 <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> 

Hope this helps! As I said, I can't test this with Safari 8; the only Safari I have (5) doesn't display the problem, but an older Chrome version does. And these styles have an effect.