Geek Answers Handbook

Safari cure problem when using "f" and "i"

I am running Safari 8.0.5 on OS X 10.10.3.

I ran into the problem of marking up letters when using the characters "f" and "i" next to each other. I assume this is a Safari bug, and I sent it to Apple as such, but also wanted to see if I could find a workaround.

HTML displays the phrase "Big Fish" in two separate fonts. To emphasize the problem, I add 10 pixels of spacing between characters.

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

This is what my output for the above looks like in Safari:

Safari Letter Spacing Issue

For testing purposes, I added an HTML comment between the characters "f" and "i" and seemed to work:

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

It turns out like this:

HTML Comment Version

, , WYSIWYG.

, , "f" "i" . , Safari, , .

:

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

"s" , "f" "i" .

webkit font features

"F" :

Capitalized f

, "fi", , . - , .

Other letters after fi

, "fi" :

fi mid-word

, iPhone 6 Plus Safari, , - .

, jsfiddle HTML CSS, , , . https://jsfiddle.net/38keruv7/4/

- , , HTML WYSIWYG?

, , .

+4
1

, Safari. "fi" - . 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;, : , Safari

+10

More articles:


All Articles