@ font-faceで複数のフォントウェイトの複数のファイル

Question

私は複数のフォントファイルを持っており、フォントウェイトにマップする必要があります。

@font-face { 
    font-family: "custom-font"; 
    src: url("font300.eot"); 
    src: url("font300.eot?#iefix") format("embedded-opentype"), 
     url("font300.woff2") format("woff2"), 
     url("font300.woff") format("woff"), 
     url("font300.ttf") format("truetype"), 
     url("font300.svg#font-300") format("svg"); 
    font-weight: 300, normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: "custom-font"; 
    src: url("font500.eot"); 
    src: url("font500.eot?#iefix") format("embedded-opentype"), 
     url("font500.woff2") format("woff2"), 
     url("font500.woff") format("woff"), 
     url("font500.ttf") format("truetype"), 
     url("font500.svg#font500") format("svg"); 
    font-weight: 500, bold; 
    font-style: normal; 
} 

font-weightをnumberとbold/normalにマッピングする必要がありますか？これは動作していません。私は全体のフォントフェイスブロックを複製したくない。

Webにはどのフォントタイパーが必要ですか？私はいくつかのことを間違えることはできますか？ （EOT、woff2、WOFF、TTF、SVG）

ありがとう

Answer 1

のfont-weight値が自動的だからどちらかのルールを作り、対応する番号に解決https://developer.mozilla.org/de/docs/Web/CSS/font-weight を参照してください、それを行うする必要はありません番号または短縮形。

フォントタイプは、サポートするクライアントによって異なります。フォーマットの各々の支持のために、参照：

EOT：http://caniuse.com/#feat=eot

WOFF：http://caniuse.com/#feat=woff

WOFF2：http://caniuse.com/#feat=woff2

SVG：http://caniuse.com/#feat=svg-fonts

TTF/OTF：http://caniuse.com/#feat=ttf