Question

我想在整个网站上使用字体家族Quicksand，除了已分配给类.font-arvo的元素之外，这些元素都应位于字体家族{{1}中}。我正在尝试通过以下CSS实现此目标：

Arvo

但是，这会将所有元素（包括具有类*:not(.font-arvo) { font-family: 'Quicksand', sans-serif; } .font-arvo { font-family: "Arvo", "google", serif; }的元素）设置为.font-arvo。如果仅执行以下操作，则类Quicksand的元素按预期位于正确的字体家族中，但其他元素则不是：

.font-arvo

注释1：我确实在.font-arvo { font-family: "Arvo", "google", serif; }部分中正确包含了这些字体。

注意2：我正在使用Bootstrap 4。

有人知道解决方案吗？谢谢！

Answer 1

您应该只能够将基本字体应用于body元素，然后使用font-arvo类覆盖所有特定部分，如下所示：

body {
    font-family: 'Quicksand', sans-serif;
}

.font-arvo {
    font-family: 'Arvo', serif;
}

<link href="https://fonts.googleapis.com/css?family=Arvo|Quicksand" rel="stylesheet">

<body>
<h2>Here is the default font</h2>
<h2 class="font-arvo">And here is the second</h2>
</body>

Answer 2

使用CSS Specifity

MDN将其定义为

哪些CSS属性值与某个元素最相关，并且因此，将被应用

将*选择器用作所有其他元素的默认值

MDN将其定义为

*选择器选择所有元素。 *选择器还可以选择另一个元素内的所有元素

例如，根据您的情况，写

.font-arvo {
 font-family: "Arvo";
}

* {
 font-family: 'Quicksand', sans-serif;
}

Answer 3

您是否尝试过向html, body {}类添加所需的字体系列？

将除一类外的所有字体设置为特定字体

3 个答案: