Robotoと呼ばれるときに使用したいフォントをブラウザがどのように知っていますか？

Question

これは、ローカルサーバからフォントをロードするときに、私は次のようなスタイリングを用いた例をたくさん見ている...

なnoobの質問ですが、ここに行く：

@font-face { 
    font-family: "Roboto"; 
    src: local(Roboto Thin), 
     url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"), 
     url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"); 
    font-weight: 100; 
    font-style: normal; 
} 

@font-face { 
    font-family: "Roboto"; 
    src: local(Roboto Medium), 
     url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"), 
     url("#{$roboto-font-path}Roboto-Light.woff") format("woff"); 
    font-weight: 500; 
    font-style: normal; 

お知らせfont-family両方のことRobotoと呼ばれています。

どのようにして私のブラウザで薄型または中型フォントを使用するようにブラウザに知らせることができますか？

他のプロジェクトでは、外部ページからフォントを読み込むときにfont-family: "Roboto Light"を使用しました。

Answer 1

@font-faceで定義されているfont-weightを定義してスタイリングで呼び出すことができます。

だから、"Roboto Thin"をfont-weight: 100;に、"Roboto Medium"をそれぞれfont-weight: 500;に設定したいときは、

同様に、@font-face内のfont-styleを変更する場合は、カスタムフォントをイタリック体と太字に設定できます。