@ font-faceがMac OSやIpadのSafariで動作しない

Question

@ font-faceに問題があります。 Whitneyという名前のカスタムフォントを使用しています。 Windows（Safariを含む）のすべてのブラウザで正常に動作しています。しかしはMac OSのSafari、またはIpadで動作しません。インターネットから、私は.svgフォントフォーマットがサファリでうまくいくという考えを持っています。だから私もそれを試みました。しかし、まだそれは適用されていません。他のフォントの.ttfフォントファイルでさえ、Safariで完全に動作していました。誰でも私のコードで何が間違っているか教えてください。または、このフォントの問題ですか？

@font-face 
{ 
    font-family: bookFont; 
    src: url("../fonts/whitney-book.eot"); 
    src: url('../fonts/whitney-book.ttf')format("truetype"), url('../fonts/whitneybook.svg#Whitney-book') format('svg'); 
} 

Answer 1

構文が正しくありません。コンマが必要なときはセミコロンがあり、 '）'と 'format'の間にスペースが必要です。

最後に、これらのURLが通常のブラウザで正しく解決されていることを確認してください。それらはウェブルートではなく、CSSファイルに関連している必要があります。あなたはこのようにそれを使用する必要が

@font-face{ 
    font-family: bookFont; 
    src: url('../fonts/whitney-book.eot') format('embedded-opentype'), 
     url('../fonts/whitney-book.ttf') format('truetype'), url('../fonts/whitneybook.svg#Whitney-book') format('svg'); } 

Answer 2

：

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
url('myfont-webfont.woff') format('woff'), 
url('myfont-webfont.ttf') format('truetype'), 
url('myfont-webfont.svg#svgFontName') format('svg'); 

}