2

[改訂]

カスタムアイコンフォントがiOS5のMobileSafariでレンダリングされません。問題はCSSにあるはずです。

http://www.fontsquirrel.comによって生成された対応するeotおよびwoff形式を使用すると、iOS 6およびデスクトップバージョンのSafari、Chrome、Firefox、およびIE9でフォントが正常に機能します。

@ font-face

私は現在、次の簡略化された@font-face宣言（SASS）を使用しています。

@font-face
  font-family: 'Boundless'
  src: asset-url('boundless.ttf', font) format('truetype')
  font-weight: normal
  font-style: normal

次のHTMLが機能します（iOS5.1のMobileSafariで目的のアイコン文字をレンダリングします。

<h1>&#xf0000;</h1>

ただし、Font-Awesome<?>のようにレンダリングしようとすると、グリフが表示されます。

SASS

i.bicon-biology:before
  font-family: "Boundless"
  content: "\f0000"

HTML

<h1><i class="bicon-biology"></i></h1>

それでもFont-Awesomeアイコンはサイト上でうまくレンダリングされます。

誰かがこの問題を引き起こしている可能性があることを知っていますか？

また、ここで行ったすべての推奨事項を試したことも付け加えておきます。@ font-faceはモバイルSafari（iPhone / iPad）に埋め込まれておらず、機能しませんでした。これには、スマイリーフェイスのハックの追加、フォントURLが絶対的なものであることの確認、svgフォントの試行（iOS 5では必要ないはずです）が含まれます。

4

1 に答える 1

4

Mobile Safariは、私が使用していたutf-8アドレスが気に入らないようです（/0f0000- /0f001e）。

フォントを編集して、Font-Awesomeが使用するのと同じ位置に文字を移動しました（/00f000...）。

0また、左側のパディングの追加/削除が違いを生むかどうかを確認しました。どちらの方法でも機能します。他のアドレス範囲については何かがあります。：\

もう一度：これは、コードが疑似要素コンテンツで使用されている場合にのみ問題になります。上記のように、&#xf0000; （および&#x0f0000;）HTMLに直接含まれている場合は、問題なくレンダリングされます。

于 2012-10-09T21:42:51.557 に答える