我的标题标签的字体系列发生了变化，但我的正文标签不断被“_reboot.scss:50”取消。另外，当我检查网页并关闭默认的“在此处输入代码font-family: var(--bs-body-font-family);”时我在 CSS 中选择的字体有效。
尝试了 Google 字体的导入和链接:
<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;
}
最佳答案
在 CSS 中使用 !important 进行覆盖是可行的，但这也意味着用户的浏览器可能会下载多余的字体。 Bootstrap has recommended, idiomatic ways to customize your Bootstrap 。例如，如果您使用 SASS，您可以 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
我建议检查文档，看看是否有更惯用的方法来解决这个问题 - 这样做通常会带来额外的好处，并且整个元素的风格会有更好的凝聚力。
关于html - 是否无法在 Bootstrap 5 中更改 <body> 的字体系列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72106238/