您如何使用不同的 @font-face样式

Question

我在一个已经定义的 @font-face样式的应用程序中写作，因此我需要使用它们。但是我看不到如何使用它们，因为我看不到它们如何具有分开或不同的名称……它只是反复 @font-face。我将如何选择其中之一？我想要具有800个字体重量的那个。

$font-name: 'Open Sans';
$font-dir: 'OpenSans';
@font-face {
    font-family: $font-name;
    font-style: normal;
    font-weight: 300;
    src:
        local('☺'),
        url('Open_Sans_300.woff') format('woff'),
        url('Open_Sans_300.woff2') format('woff2');
}
@font-face {
    font-family: $font-name;
    font-style: normal;
    font-weight: 400;
    src:
        local('☺'),
        url('Open_Sans_400.woff') format('woff'),
        url('Open_Sans_400.woff2') format('woff2');
}
@font-face {
    font-family: $font-name;
    font-style: normal;
    font-weight: 600;
    src:
        local('☺'),
        url('Open_Sans_600.woff') format('woff'),
        url('Open_Sans_600.woff2') format('woff2');
}
@font-face {
    font-family: $font-name;
    font-style: normal;
    font-weight: 700;
    src:
        local('☺'),
        url('Open_Sans_700.woff') format('woff'),
        url('Open_Sans_700.woff2') format('woff2');
}
@font-face {
    font-family: $font-name;
    font-style: normal;
    font-weight: 800;
    src:
        local('☺'),
        url('Open_Sans_800.woff') format('woff'),
        url('Open_Sans_800.woff2') format('woff2');
}

Answer 1

与@font-face声明一样，您只需要在引用字体的元素上设置font-weight CSS属性即可。请注意，虽然通常用于normal或bold，但您也可以指定整数值：

element {
  font-family: 'Open Sans';
  font-weight: 300; // Will use 'Open_Sans_300.woff'
}
element2 {
  font-family: 'Open Sans';
  font-weight: 400; // Will use 'Open_Sans_400.woff'
}