@ font-face 2つの解析エラー

Question

サイトはデスクトップブラウザで完全に動作します。

携帯電話のブラウザでは、サイトでフォントファイルが読み取られません。

私はCSSバリデータをチェックし、2つのエラー、解析エラーが見つかりました。私はいくつかのことを試しましたが、解析エラーを取り除くことはできません。エラーのあるコードには、次のようなものがあります。フォントファイルはローカルに格納されます。

アドバイスをいただければ幸いです。

@font-face { 
    font-family: 'trashhand'; 
    src: url('TrashHand.ttf'); 
} 

Answer 1

フォントファミリ用のフォールバックシステムを作成できます。たとえば：

font-family:'Trashhand', 'Lucida Sans', 'Arial' 

フォールバックシステムのための主な目的は、代替フォントの使用を作成することですので、ブラウザは最初のフォントをサポートしていない場合には、次のオプションを試します。

Answer 2

フォントを正しくインポートすることができます。

CSSは、フォントをインポートするには：

@font-face { 
    font-family: 'TrashHand'; 
    src: url('TrashHand.ttf') format('truetype'); /* Safari, Android, iOS */ 
} 

CSSの使用法：

body{ 
    font-family:'TrashHand', sans-serif; 
} 

また、あなたが別のブラウザやシステムのための異なるfontfaceをインポートするhere多くのpossiblitiesを見ることができます。

Answer 3

まず第一に、あなたのフォントがOpenTypeかTrueTypeであればformatヒントはオプションですが、それが明示的に指定する価値はあります。そのほかに

@font-face { 
    font-family: 'trashhand'; 
    src: url('TrashHand.ttf') format('truetype'); 
} 

は、モバイルデバイス上で認識パスを持ついくつかの問題がありました。したがって、フォントパスの先頭に/を含めると、すべてが修正される可能性があります。

重要なブラウザと互換性があるwoffまたはwoff2を使用することをお勧めしますが、これに限定されません。