在CSS中设置font-weight与粗体字体系列，哪个更正确？

9

在CSS中，基本上有两种使字体加粗的方式：通过font-family属性和通过font-weight属性。

假设我使用的是Raleway字体，并通过css加载了Light，Regular，Semibold和Bold变体。通过将其设置为h1{font-family: 'Raleway Bold'}或，可以将一个简单的标题变为粗体h1{font-weight: 700}。

哪个更正确，或者两者都相同？

css web-fonts html

— 便服
source

我怀疑，当您拥有字体系列中的所有选项时，用CSS编写“ font-weight”是否正确。例如：Raleway字体具有从浅到超粗体的所有选项。因此，哪种方法适合使用家族中的所有字体，所以我们不能松散字体字符。

— pooja

1

非常相关的问答环节。

— 蔡

@poojaa，我可以自由地编辑您的问题，以使格式更清晰，并使实际问题更加突出。如果您觉得我已经更改了含义，则可以随时对其进行编辑。

— PieBie

6

假设我们已经加载了一个Bold字体变体，如下所示：

@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;
}

两者基本上都做同样的事情：告诉heading1为粗体。这不会使加粗或其他任何东西加倍，只是重复了它需要加粗。

原因很简单：如果未加载字体文件（服务器过载，客户端限制，伏都教），那么您的访问者仍然会看到粗体字体（在这种情况下为人造粗体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”之间的差异。精心设计的字体在常规字体，粗体和斜体之间会有所不同，如果不加载它们，您将不会得到它们。

— 派比
source

在不加载字体文件的情况下，使用一个姓氏并仅设置粗细仍会为您提供正确的粗细。使用两者的唯一原因是出于兼容性原因。

— 蔡

1

你很困惑。你的谷歌字体例子并不仅指Raleway斜体刚刚font-family: 'Raleway'（顶撞你大胆上面的例子），但是，另外，不管命名整个家庭Raleway用不同的字体系列名称单独或每个变体具有绝对没有轴承上采用虚假或不。甚至您自己的示例也证明这是不正确的方法，因为您提供的方法font-family: 'Raleway Bold', Helvetica, Arial, sans;确实如此Helvetica Bold并且Arial Bold单独存在，因为这只是层叠字体变体的不正确方法。

— rgthree

1

虽然这两种方法都能为您提供正确的输出，但更正确的方法是使用单个字体系列对粗细和样式的所有不同变体进行分组。使用系统字体的方式相同（从“ 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非常好用。我们不需要将“ RalewayBold”指定为.bold的字体系列，也不需要将.italic指定为“ RalewayItalic”。实际上，我们甚至不需要指定粗体和斜体变体，因为我们的类可以正常工作。此外，如果.bold位于我们的.footer内，它将是粗体的Arial而不是Raleway，因为它只是从页脚容器继承了Arial。

这是浏览器执行的方式。

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

这就是行业做和做过的方式。

最大的网络资源，应用程序和发布者都采用这种方式。Google，Facebook，NYT，ESPN等均以这种方式定义和使用字体。

不仅如此，CSS甚至互联网之前的用户界面都指定单个字体系列，并根据不同的字体和样式规范选择变体。加载Microsoft Word，KeyNote，Google文档，甚至是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');
}

— th
source

这种方法是否不忽略人造字体样式之间的差异？

— 瑞安（Ryan

@Ryan一点也不。实际上，字体家族的名称（正确地将RalewayRaleway BoldRaleway Italic字体与粗细/样式变体捆绑在一起，或错误地定义单个变体和单个字体家族）与是否应用人造变体无关。实际上，正确地将家族同名捆绑在一起可以帮助浏览器选择更接近的变体来应用虚假样式，而错误地分别命名每个变体会使浏览器处于可用字体的黑暗中，如果未加载所需字体则无法应用变体。

— rgthree '16

（1）只需从Google字体加载：可以肯定是用于网站，但是在很多情况下，使用html / css不能保证互联网连接，您必须在本地加载字体，（2）降低了CSS复杂性一个文件大小：最终，您将在数十MB的网站或应用程序上刮掉1kb的内容，客户端会对应用程序加载的速度感到惊讶，（3）这是浏览器/行业的浏览方式：默认为假，无论如何，“行业”并不总是正确的，也不遵循最佳实践（仅查看flexbox）

— PieBie

浏览器默认为仿什么？您显然不知道您在说什么。当你指定font-family:Arial; font-weight:bold;（这，又是正确的方式做到这一点，无论如果它是宋体或Raleway）你认为浏览器应用仿粗体正常Arial字体的脸？不正确浏览器正在按系统定义的方式加载ArialBold字体，只有在没有确切的字体可用时，它才会根据字体家族名称将仿造样式应用于最匹配的字体，这就是为什么它们必须相同的原因！不能说“这样做是为了Arial，但不是Raleway。”

— rgthree

0

事情就是这样，如果您问有关Raleway（为CSS编程的Webfont）的问题，那么两种方法都可以很好地工作。在这种情况下，请使用font-weight，因为这是“正确”的操作过程，无需更改代码即可最轻松地更改和控制。

现在，一旦您自己嵌入字体，便开始出现问题，这种字体不一定是为CSS设计的，并且粗细可能与数字不匹配。

因此，嵌入字体的一个非常常见的错误（在非英语字体中非常常见）是css自动“压缩”或“减轻”字体，结果非常糟糕。

因此，我建议如果您使用网络字体（如Google字体中的字体），请继续使用字体粗细上的数字，但是当您自己嵌入字体时，请保持安全，对每个粗细分别使用字体家族。

— 内蒂
source