フォント・オブザーバーでローカル・フォントを読み込む - 私の約束に必要なすべての重量？

Question

私は2つのスタイル（通常と太字）を持つローカルフォントをそれぞれ2つ用意しています。フォントフェースオブザーバをロードするように設定しようとしています。私は同じ名前の両方のフォントを一覧表示しているので、ブラウザが大胆に特定のフォントを設定するためにCSSのすべてのビットに触れることなく通常のものと大胆なものを選択できます。私は正常にこれは正常に動作するはずだと思うが、私は今、体重を指定し、それに応じて私のCSSを修正する必要があるかどうかわからない、フォントの顔のオブザーバの追加で思う。 https://github.com/bramstein/fontfaceobserverでフォントウェイトは必須ではないが、指定されていなければ "normal"に設定されると読んでいる。

ので、この：

var fontHeading = new FontFaceObserver("Oxygen", { weight: 400 }); 
    var fontMain = new FontFaceObserver("Rubik", { weight: 400 }); 
    Promise.all([ 
     fontHeading.load(), 
     fontMain.load(), 
    ]).then(function() { 
    document.documentElement.className += " fonts-loaded"; 
    }); 

またはこの：

var fontHeading = new FontFaceObserver("Oxygen", { weight: 400 }); 
var fontHeadingBold = new FontFaceObserver("Oxygen", { weight: 700 }); 
var fontMain = new FontFaceObserver("Rubik", { weight: 400 }); 
var fontMainBold = new FontFaceObserver("Rubik", { weight: 700 }); 
Promise.all([ 
    fontHeading.load(), 
    fontHeadingBold.load(), 
    fontMain.load(), 
    fontMainBold.load(), 
]).then(function() { 
    document.documentElement.className += " fonts-loaded"; 
}); 

私のCSS：

@font-face { 
     font-family: 'Rubik'; 
     font-style: normal; 
     font-weight: 400; 
     src: 
     url(../fonts/rubik-v6-latin-regular.woff2) format('woff2'), 
     url(../fonts/rubik-v6-latin-regular.woff) format('woff'); 
    } 
    @font-face { 
     font-family: 'Rubik'; 
     font-style: normal; 
     font-weight: 700; 
     src: 
     url(../fonts/rubik-v6-latin-700.woff2) format('woff2'), 
     url(../fonts/rubik-v6-latin-700.woff) format('woff'); 
    } 
    @font-face { 
     font-family: 'Oxygen'; 
     font-style: normal; 
     font-weight: 400; 
     src: 
     url(../fonts/oxygen-webfont.woff) format('woff'), 
     url(../fonts/oxygen-webfont.woff2) format('woff2'); 
    } 
    @font-face { 
     font-family: 'Oxygen'; 
     font-style: normal; 
     font-weight: 700; 
     src: 
     url(../fonts/oxygen-bold-webfont.woff) format('woff'), 
     url(../fonts/oxygen-bold-webfont.woff2) format('woff2'); 
    } 

CSS：

h3 { 
font-weight: bold; 
font-family: "oxygen-bold"; 
} 

Answer 1

2種類の重みで家族向けに何をすべきかをCSSに伝えたときに、なぜfont-family: "oxygen-bold";を使用していますか？

あなたはとてもちょうどそれを使用し、それが重み400と700のために何をすべきかを指定：

h3 { 
    font-family: Oxygen; /* no quotes needed when there are no spaces/dashes/etc */ 
    font-weight: 700; 
}