javascript - 使用字体观察者加载本地字体 - 我的 promise 所需的每个重量？

Question

我有 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";
}

Answer 1

当您告诉CSS如何以两种不同的粗细处理“Oxygen”系列时，为什么还要使用font-family: "oxygen-bold";？

您指定了它对权重 400 和 700 应该执行的操作，因此只需使用它即可:

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