1

私は自分の Web サイトでいくつかのコスチューム フォントを使用していますが、ロードされていないものに問題があり、問題を特定できません。コードは次のとおりです。

@font-face { 
    font-family: OuachitaWayWbw; 
    src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
    font-family: 'ChromeYellowNF'; 
    src: url('fonts/Chrome Yellow NF.ttf');
}

#name { 
    font-size:26px; 
    font-family: 'OuachitaWayWbw'; 
    padding-top:30px; 
    color:#000000; 
    margin-bottom:20px; 
}

ChromeYellowNF作品の. また、それぞれを別のものにしようとしましFont-faceたが、うまくいきませんでした。

4

2 に答える 2

7

フォントごとに @font-face 宣言が必要です。

@font-face { 
  font-family: OuachitaWayWbw; 
  src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
}
@font-face { 
  font-family: ChromeYellowNF; 
  src: url('fonts/Chrome Yellow NF.ttf');
}

一重引用符は必要ありません。

IE9 用のカスタム フォントを使用する場合は、".eot" フォント ファイルも提供する必要があります。http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

編集:わかりました、ブラウザーによってフォントの実装方法が異なります。

@font-face {
   font-family: OuachitaWayWbw; 
   src: url('fonts/Ouachita Way Wbw.ttf') format("truetype"),
        url('fonts/Ouachita Way Wbw.woff') format("woff");
   src: url('fonts/Ouachita Way Wbw.eot');
}

次のタイプを .htaccess/IIS に追加する必要がある場合もあります。

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

ここから取得: Chrome で MIME タイプが間違っている font-face

于 2013-01-11T22:45:08.117 に答える
2

これについてはよくわかりませんが、font-family 名はおそらく引用符で囲む必要があるようです。また、各フォントを独自の @font-face 宣言に入れてみることもできます。それはあなたの問題を解決するはずです。@font-face 宣言内で指定された最後の font-family を使用していると思います。

@font-face { 
  font-family: 'OuachitaWayWbw'; 
  src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
}
@font-face { 
  font-family: 'ChromeYellowNF'; 
  src: url('fonts/Chrome Yellow NF.ttf');
}

#name {
    font-size:26px; 
    font-family: 'OuachitaWayWbw'; 
    padding-top:30px; 
    color:#000000; 
    margin-bottom:20px; 
}
于 2013-01-11T22:17:18.097 に答える