web-dev-qa-db-ja.com

@ font-faceがモバイルSafari（iPhone / iPad）に埋め込まれていません

@font-face（FontSquirrelのcss）を使用してモバイルWebサイトにフォントを埋め込んでいます。デスクトップのSafariまたはChromeでプレビューすると、フォントは正常に埋め込まれますが、iPhone/iPadのモバイルSafariでは表示されません。エラーが発生せず、何が問題になっているのかわかりません。これが私のCSSです。何か案は？

@font-face {
    font-family: 'JottingRegular';
    src: url('../fonts/jotting_regular-webfont.eot');
    src: local('☺'),
         url('../fonts/jotting_regular-webfont.woff') format('woff'),
         url('../fonts/jotting_regular-webfont.ttf') format('truetype'),
         url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JottingBold';
    src: url('../fonts/jotting_bold-webfont.eot');
    src: local('☺'),
         url('../fonts/jotting_bold-webfont.woff') format('woff'), 
         url('../fonts/jotting_bold-webfont.ttf') format('truetype'), 
         url('../fonts/jotting_bold-webfont.svg#webfontJpUFTHYS') format('svg');
    font-weight: normal;
    font-style: normal;
}
iphonecssipadmobile-safarifont-face
15
pixielex

OK、私はそれを理解しました、そして将来この問題を抱えている人のために文書化します。 Font SquirrelからCSSをコピーした後、実際のフォントファイルを再ダウンロードする必要がありました。それがCSSで何も変わるとは思いませんでしたが、SVGフォント（モバイルサファリで使用される）はすべて、フォントファイルとCSSで参照されるIDを持っていることがわかりました。

だから、で：

url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg')

webfonttEfFltbIはフォントIDです。テキストエディタでSVGフォントファイルを開いたところ、ファイルの先頭近くにある次の行に新しいIDが見つかりました。

<font id="webfontC6xdxB57" horiz-adv-x="972" >

CSSのハッシュタグの後にIDを置き換えると、問題が修正されました。

22
pixielex

私も同じ状況でした。フォントへのパスを更新することで解決しました。 Chrome＆Safariはそれらを正常にロードしていましたが、iOSは私のパスを認識していませんでした

url ('font/chunkfive/font.eot')

その行を変更して、フォントパスの先頭に/を含め、すべてを修正しました。

url ('/font/chunkfive/font.eot')

絶対パスを使用することもできます。

2
Matt B

私は自分の愚かな間違いに気付く前に、これを1時間使っていました。

モバイルSafariはフォントに対して大文字と小文字を区別しますが、デスクトップSafariはそうではありません。

フォントのタイトルが次の場合：font.svg、そのまま追加する必要があります。 Capital Fで追加すると、Desktop Safariは気にしませんが、モバイルは気にします。

1
gkrizek

フォントフェイスは、iOS4.2までMobileSafariでサポートされていません。

1
Mike

フォントフェイスはモバイルサファリで動作します。私はiphone3で使用しています。フォントスクワールからコードをコピーしましたが、動作しませんでした。更新されたコードは次のとおりです。これを使用すると、どこでも機能します。

@font-face {
    font-family: 'MyriadProBoldCondensed';
    src: url('/fonts/myriadpro-boldcond-webfont.eot#') format('eot'),
         url('/fonts/myriadpro-boldcond-webfont.woff') format('woff'),
         url('/fonts/myriadpro-boldcond-webfont.ttf') format('truetype'),
         url('/fonts/myriadpro-boldcond-webfont.svg#MyriadProBoldCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}
0
Sachin Gadia

これはすでに解決されていますが、ここでも同様の問題がありました。

@ font-faceがモバイルWebkitで機能しない

私にとって、SVGフォントのすべてのIDは正しいものでした。不安定だったのはFontSquirrel構文でした。更新されたFontSpring防弾構文を使用すると、問題が修正され、完全にクロスブラウザーで機能するようです。

0
bigsweater