Html 如何为云中托管的字体定义粗体和斜体？

我使用的网页字体如下：

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;

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

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

然后你可以使用它：

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

很抱歉之前的小提琴，没有导入谷歌字体。（肯定是JSFIDLE的问题）Regarless，类似这样的东西？谢谢你的小提琴；我选择了类似的东西——只使用了
strong
元素。不幸的是，它是一个javascript<代码>

。我认为

本地（源代码）

只适用于系统字体？或者通过js/css导入的字体会变成本地字体吗？