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

Question

这个 W3Schools 教程教我如何使用 CSS

font-style

属性使文本变为粗体（相当于老式 HTML 中的

<b&g>this</b>

）以及如何使文本斜体（相当于旧式 HTML 中的

<i>this</i>

）时尚的 HTML）。

但是，我似乎在任何地方都找不到如何使文本同时具有这两个属性（相当于老式 HTML 中的

<b><i>this</i></b>

）。

有没有办法使用纯 CSS 来做到这一点？

我试过这个：

font-style: italic bold;

结果是页面忽略了这两个属性，就好像我根本没有指定过这个属性一样。

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

font-style: italic, bold;

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

font-style: italic; bold;

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

这可以用纯CSS来完成吗？

Answer 1

你很接近。

italic

与

font-style

一起使用，而粗体与

font-weight

一起使用。

用途：

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

Answer 2

font-style

是单值属性。无论如何，

bold

是字体粗细。要组合多个值，您可以使用简写

font

属性。但是，

font

简写需要输入：

font-size

和

font-family

。如果您不在简写中包含这两个属性，则该属性将被忽略。

将这些与

font

一起包含在您的

italic bold

速记中，它应该可以工作。

Answer 3

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

font-style  : italic
font-weight : bold

字体粗细文档：W3Schools 字体粗细

字体样式文档：W3Schools 字体样式

Answer 4

请看一下这段代码：

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

Answer 5

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

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

Answer 6

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

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

这一步经常被忽视，但其实很容易完成。

我将在这里演示（这是不言自明的，但无论如何我都会展示它）

我将在这里使用 Google Fonts，以及特定的字体系列 Lato。

1. 转到Google-字体/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');

Answer 7

您在字体样式中添加粗体犯了一个小错误。粗体位于字体粗细之下。如下所示，（顺序无关紧要。）

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