フッターのナビゲーションのカスタム Web フォントである iconfont のグリフが、iPhone で表示すると表示されません。iOS6.1.4です
なぜこれが起こっているのか、それを修正する方法はありますか?
以下は、フッターのアイコンが表示されないスクリーンショットです。
これが起こっているページへのリンクです
フッターのナビゲーションのカスタム Web フォントである iconfont のグリフが、iPhone で表示すると表示されません。iOS6.1.4です
なぜこれが起こっているのか、それを修正する方法はありますか?
以下は、フッターのアイコンが表示されないスクリーンショットです。
これが起こっているページへのリンクです
問題は、IOS が font-feature-settings CSS プロパティを部分的にサポートしているにもかかわらず、iOS Safari で合字を追加して使用できることtext-rendering: optimizeLegibility
です。次のリンク ( http://clagnut.com/sandbox/opentype/ligatures ) は、Magenta フォントを使用するテキストを Common & Discretionary Ligatures ON で、その他のテキストを Common & Discretionary Ligatures OFF で示しています。
iOS デバイスからこのリンクにアクセスすると、両方のテキストが同じであることがわかります。これは、iOS が のみの合字をサポートしていないことを意味しfont-feature-settings
、それがタイポグラフィの字形が iOS で機能しない理由です。
iOS で動作させるにはtext-rendering: optimizeLegibility
、css に追加する必要があります。「今日の明日のウェブタイプ: 合字の素晴らしい繁栄」が参考になるかもしれません。ただし、 「CSS ルール "text-rendering: optimizelegibility;" を使用しても安全ですか?」を読む必要があります。すべてのテキストで?」.
iOS で動作するフォントの例は、次のリンクにあります。
http://jsfiddle.net/poselab/TQjgC/
text-rendering: optimizeLegibility;
iPhone からのこの jsfiddle のスクリーンショット: