实际上，@font-face有一种特殊的味道，它可以满足您的要求。
下面是一个使用相同字体系列名称的示例，但与不同字体关联的样式和粗细不同：

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

现在，您可以将font-weight:bold或font-style:italic指定给您喜欢的任何元素，而不必指定字体系列或覆盖font-weight和font-style。

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

有关此功能和标准用法的完整概述，请查看this article.

EXAMPLE PEN（第一个字母）

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
       url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
       url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}

如果像我一样，你需要加载Roboto字体，而不打谷歌的服务器，它应该看起来像：

/* Thin */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Thin.ttf) format('truetype');
    font-style: normal;
    font-weight: 100;
}

/* Light */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Light.ttf) format('truetype');
    font-style: normal;
    font-weight: 300;
}

/* Normal */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Regular.ttf) format('truetype');
    font-style: normal;    
    font-weight: 400;
}

/* Medium */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Medium.ttf) format('truetype');
    font-style: normal;
    font-weight: 500;
}

/* Bold */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Bold.ttf) format('truetype');
    font-style: normal;    
    font-weight: 700;
}

/* Black */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Black.ttf) format('truetype');
    font-style: normal;
    font-weight: 900;
}

如果需要的话，对斜体变体做同样的操作。关于将名字Map到数值权重的线索，请参见font-weight documentation。

2022年更新：使用可变字体

如果您的字体可用作可变字体，您实际上可以将**多个字体粗细组合在单个@font-face**规则中，如下所示：

@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 200%;
  src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
}

我们需要通过添加2个值来指定字体粗细范围：

font-weight: 100 1000;

第一个