假设我们已经像这样加载了一个粗体字体变体：

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

我会赞成在您的样式规范中font-family同时使用两者。font-weight例如：

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

两者基本上都做同样的事情：告诉你的标题1是粗体。这不会加倍粗体或任何东西，它只是重复它需要粗体。

原因很简单：如果您的字体文件没有加载（服务器过载、客户端限制、巫毒），那么您的访问者仍然会看到粗体字体（在这种情况下是仿粗体 Helvetica），因此可以区分标题和正文，如果您只指定font-family.

在这张图片中，顶部的集合是 Raleway 和 Raleway Italic，但加载了正确的 Raleway Italic：

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

底部只加载Raleway。因此，底部设置有 Raleway 和 FAUX Raleway 斜体。请注意小写“a”和“k”的区别，例如真正的斜体和仿斜体之间的差异。设计良好的字体会在常规、粗体和斜体之间存在差异，如果不加载它们，您将无法获得这些差异。

虽然这两种方法都会为您提供正确的输出，但更正确的方法是使用单个字体系列来对所有不同的权重和样式变体进行分组。这与您使用系统字体的方式相同（从“Arial”到“sans-serif”），事实上，如果您使用 Google 字体加载 Raleway，您将使用单一字体系列路线。

让我们概述一下为什么这是正确方法的几个原因。

它减少了 CSS 复杂性，最终减少了文件大小

拥有单个字体系列意味着您可以使用字体系列定义整个包含元素，并且只能定义具有不同粗细/样式的某些元素。以以下为例：

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

注意这个 CSS 是多么的好和简洁。我们不需要为 .bold 指定“RalewayBold”作为字体系列，也不需要为我们的 .italic 指定“RalewayItalic”。事实上，我们甚至不需要指定粗体和斜体变体，因为我们的类将简单地工作。此外，如果 .bold 在我们的 .footer 中，它将是粗体 Arial 而不是 Raleway，因为它只是从页脚容器中继承 Arial。

浏览器就是这样做的。

以上本质上是浏览器内部样式表如何通过使用最小样式和 CSS 固有的级联性质来定义字体。

这是行业的做法，并且已经做到了。

最大的网络资产、应用程序和出版商都是这样做的。Google、Facebook、NYT、ESPN 等都以这种方式定义和使用字体。

不仅如此，在 CSS 甚至互联网之前的用户界面都指定了单一的字体系列，并根据不同的粗细和样式规范选择变体。加载 Microsoft Word、KeyNote、Google Docs，甚至是 1990 年代后期的旧 WordPerfect，然后打开字体下拉菜单；您会看到列出的字体系列名称“Arial”；不是“Arial”，然后是“Arial Bold”，然后是“Arial Italic”等。

只需从 Google 字体加载。

如果您从 Google Fonts 上的免费 webfonts 存储库加载 Raleway，您会看到 Raleway 是用一个姓氏定义的：

https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}

事情是这样的，如果你问关于 Raleway 的问题，这是一种为 css 编程的网络字体，两种方式都一样好。在这种情况下，请使用字体粗细，因为它是“正确”的操作过程，最容易更改和控制，而无需对代码进行重大更改。

现在，一旦您自己嵌入字体，您就会开始遇到问题，这种字体不一定是为 css 计划的，并且权重可能与数字不匹配。

正因为如此，嵌入字体的一个非常常见的错误，在非英文字体中非常常见，是 css 自动“加粗”或“变亮”字体，结果非常糟糕。

因此，我建议如果您使用像谷歌字体上的字体这样的网络字体，请继续使用 font-weight 上的数字，但是当您自己嵌入字体时，请保持安全并为每个单独的权重使用 font-family .