0
나는 2 개의 로컬 글꼴을 갖고 있는데, 각각 2 개의 스타일 (일반 글꼴과 굵은 글꼴)로 사이트에서 사용하기를 원하며 글꼴 얼굴 관찰자를로드하려고합니다. 두 글꼴을 동일한 이름으로 나열 했으므로 브라우저가 대담하게 특정 글꼴을 설정하기 위해 CSS의 모든 비트를 건드리지 않고도 대 대담한 글꼴을 선택할 수 있습니다. 나는 정상적으로이 잘 작동해야한다고 생각하지만 글꼴 얼굴 관찰자의 추가로 지금은 무게를 지정하고 그에 따라 내 CSS를 수정 해야하는지 모르겠다. https://github.com/bramstein/fontfaceobserver에서 글꼴 두께가 필수는 아니지만 지정하지 않으면 "보통"으로 설정됩니다.글꼴 얼굴 관찰자가있는 로컬 글꼴로드 - 약속에 필요한 모든 가중치?
그래서이 :
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";
}