5

OS X 10.10.3 で Safari 8.0.5 を実行しています。

文字「f」と「i」を隣り合わせに使用すると、文字間隔の問題が発生します。私の推測では、これは Safari のバグであり、そのように Apple に報告しましたが、その間に回避策を見つけることができるかどうかも確認したかったのです。

HTML は、「The fish is large」という語句を 2 つの別々のフォントで出力します。問題を強調するために、各文字の間に 10 ピクセルの文字間隔を追加しました。

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 の文字間隔の問題

テスト目的で、「f」と「i」の文字の間に HTML コメントを追加しましたが、うまくいったようです。

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

次のように出力されます。

HTML コメント バージョン

これは技術的には機能しますが、ここのコンテンツは実際には WYSIWYG エディターによって生成されているため、私にとって理想的なソリューションではありません。

問題は、「f」と「i」が隣り合っている場合のみのようです。これらの文字が Safari で特別な意味を持っているかどうかはわかりませんが、英語ではかなり一般的な文字列であるため、キーワードをそれほど小さくするべきではありません。

これも追加してみました：

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

これにより、「s」が右に押し出されましたが、「f」と「i」はまだ一緒にまとめられていました。

Webkit フォント機能

大文字の「F」には同じ問題はありません。

大文字の F

また、「fi」に続く文字は関係ないようです。他のものに変更できますが、それでも同じ問題があります。

fi の後のその他の文字

また、「fi」が単語の途中にある場合も同じことを行います。

fi 中間語

この問題は、最新バージョンの Safari を実行している iPhone 6 Plus でも発生しているように見えることを確認したので、これが私の側の問題であるとは思えません。

問題を説明するために、必要な HTML と CSS を使用して jsfiddle を作成しました。これにより、問題が再現されることを願っています。 https://jsfiddle.net/38keruv7/4/

クライアントに WYSIWYG エディターで単語の途中に HTML コメントを挿入するように依頼することを伴わない回避策について、何かアイデアを持っている人はいますか?

データを出力する前にその特定の組み合わせをスキャンして置き換えることができると思いますが、はるかに大きなデータのチャンクを処理する場合、サーバー リソースの使用効率がかなり悪いように思えます。

4

1 に答える 1

11

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;それでも問題が解決しない場合は、問題も解決するという関連する質問があります: Letters Connected in Safari

于 2015-04-16T17:59:07.610 に答える