html - 如何为云中托管的字体定义粗体、斜体？

Question

我正在使用这样提供的网络字体:

font-family:'Sabon LT W01 Roman';
font-family:'Sabon LT W01 Italic';

并希望能够在我的 CSS 中使用类似这样的东西:

font-family: 'Sabon';
font-style: italic;

代替

font-style: 'Sabon LT W01 Italic'

在我的 CSS 中。

有办法实现吗？我知道在使用 @font-face 并直接链接到字体时可以定义粗体/斜体，但事实并非如此。这些字体托管在 Fonts.com 上，所以我不认为我可以使用 @font-face 并指定字体文件，除非我托管它们。

这就是我现在设置样式的方式:

%font-serif {
  font-family:'Sabon LT W01 Roman', serif;
}

%font-serif-italic {
  font-family:'Sabon LT W01 Italic', serif;
  font-style: italic;
}

这迫使我使用 @extend %font-serif; 而不是

@extend %font-serif;
font-style: italic;

Answer 1

您如何导入字体？直接链接？如果是这样，您仍然可以使用字体:

@font-face {
  font-family: 'Sabon';
  src: local('Sabon'), local('Sabon'), url('http://link/font.woff') format('woff');
}

然后你就可以使用它了:

#block{
    font-family: 'Sabon';
    font-weight: bold;
}