代码之家 › 专栏 › 技术社区 › wohe1

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

bootstrap-4 fonts css

wohe1 · 技术社区 · 7 年前

我想用字体系列 Quicksand 在我的整个网站上,除了分配给班级的元素 .font-arvo ,这些应该在字体系列中 Arvo . 我正尝试通过以下CSS来实现这一点:

*:not(.font-arvo) {
    font-family: 'Quicksand', sans-serif;
}

.font-arvo {
    font-family: "Arvo", "google", serif;
}

但是,这将设置所有元素,包括具有类的元素 字体ARVO ,为了 流沙 . 如果我只执行以下操作,则使用类 字体ARVO 如预期的那样,字体系列是正确的,但其他字体则不是:

.font-arvo {
    font-family: "Arvo", "google", serif;
}

注1: 我确实在 <head> 部分。

注2: 我正在使用引导程序4。

有人知道解决办法吗?谢谢!

3 回复 | 直到 7 年前

Dryden Long 7 年前

您应该能够将基本字体应用到 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>

Marvin 7 年前

使用 CSS Specifity

MDN将其定义为

哪些css属性值与元素最相关, 因此,将应用

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

MDN将其定义为

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

例如,在您的案例中,写

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

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

Bogdan Vakuliuk 7 年前

是否尝试将所需的字体系列添加到 html, body {} 班级?

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前