Bootstrap 5 中 <body> 的字体系列不能更改吗？

Question

我的标题标签的 Font-Family 发生了变化，但我的 body 标签一直被“_reboot.scss:50”取消。此外，当我检查我的网页并关闭默认“enter code herefont-family: var(--bs-body-font-family);”我在 CSS 作品中选择的字体。

为 Google 字体尝试了导入和 Link：

<style>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap');
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap" rel="stylesheet">

Css 选择器：

body {
  font-family: 'Montserrat', sans-serif;
}

Answer 1

使用 !important 覆盖 css。例子-

body {
  font-family: 'Montserrat', sans-serif !important;
}

Answer 2

用 !important 覆盖 CSS 会起作用，但这也意味着您的用户的浏览器可能会下载多余的字体。 Bootstrap has recommended, idiomatic ways to customize your Bootstrap. For instance, if you are using SASS you can override variable defaults 将您自己的字体设置为 Bootstrap 字体，例如：

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$font-family-sans-serif:      'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
// stylelint-enable value-keyword-case

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

我建议查看文档，看看是否有更惯用的方法来解决这个问题——这样做通常会带来额外的好处，并使整个项目的样式更好地结合。

Bootstrap 5 中 <body> 的字体系列不能更改吗？

Is it not possible to change font family of <body> in Bootstrap 5?

html

css

bootstrap-5