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'
}

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

1 个答案: