如何在CSS中组合加粗和斜体？

Question

这个W3Schools教程教我如何使用CSS的font-style属性来使文本加粗（在旧式HTML中相当于<b&g>this</b>）以及如何使文本斜体（在旧式HTML中相当于<i>this</i>）。

但是，我似乎找不到任何地方可以同时实现两种效果（在旧式HTML中等同于<b><i>this</i></b>）。

是否有一种纯CSS的方法可以做到这一点？

我尝试过这个：

font-style: italic bold;

结果导致页面忽略了这两个属性，就好像我从未指定过这个属性一样。

当我尝试了这个时，我得到了相同的结果：

font-style: italic, bold;

我尝试了这个，但得到的结果不同：

font-style: italic; bold;

这次发生的情况是它使用了第一个给定的样式（斜体），但忽略了第二个（粗体）。

纯CSS能做到吗？

- Sophia_ES

---

粗体是字重的值，而不是字体样式。 - j08691

你在链接的页面中看到了“bold”一词吗？ - web-tiki

Answer 1

你差一点就对了。

italic 与 font-style 一起使用，而粗体则与 font-weight 一起使用。

使用：

font-weight: bold;
font-style: italic;

- Richard Hamilton

Answer 2

font-style是单一属性。无论如何，bold是字体粗细。要组合多个值，您可以使用缩写的font属性。然而，font缩写有必填项：font-size和font-family。如果未在缩写中包含这两个属性，则该属性将被忽略。

在您的font缩写中包含italic bold以及这两个属性，它就会起作用。

- TylerH

Answer 3

你可以使用这两个属性来获得斜体和粗体字。

font-style  : italic
font-weight : bold

字重文档： W3Schools字重

字体风格文档： W3Schools字体风格

- Weedoze

Answer 4

请看这段代码：

Please have look at this code:

font: italic bold 12px/30px Georgia, serif;

- vignesh

Answer 5

W3Schools不好的另一个原因是，你应该使用 font-weight 来设置加粗，font-style 来设置斜体。

font-weight: bold;
font-style: italic;

- epascarello

---

不是为了维护w3schools，但他们在其“font-style”页面上没有提到“bold”。 - j08691

根据楼主的陈述，看起来是这样的。 - epascarello

我也不是很喜欢W3Schools，但这次并不是他们的错。“bold”在OP的链接中没有提到。 - web-tiki

@epascarello 我同意，所以我去检查了一下，看看他们是否那么愚蠢。顺便说一句，我没有扣分你。 - j08691

我觉得它已经有了，因为OP已经说明了，我太懒了，没有查看链接。有趣的是，OP使用的浏览器支持font-style加粗。 - epascarello

Answer 6

嗨，我也遇到了同样的问题。我按照上面指定的步骤进行了操作。

但是，上面的答案没有导入指定字体样式（粗体斜体）的css文件就不完整。你必须有一个导入字体的粗体斜体样式的.css文件才能实际显示所需的效果。

这一步经常被忽视，但非常容易完成。

我将在这里演示它（虽然很简单但我还是会展示一下）

我将使用Google Fonts，具体的字体系列是Lato。

1. 前往Google-Fonts/Lato。

   Google-fonts/Lato的截图。

2. 勾选粗体斜体或您想要的字重。这里我选择了“黑色”（字重=900）

• 上述步骤的截图

3. 最后，像这样将其导入到您的 .css 文件中

   @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,900&display=swap');

- Lucifer