如何在 Bootstrap 5 中使用两种字体系列

Question

我正在使用 Bootstrap 5 构建一个 React 项目，我想在该项目中添加 2 个字体系列。我已经使用 ggogle 字体更改了默认引导字体系列，如何添加另一个字体系列，以及如何分别使用这两种字体的类

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');

:root{
    --bs-body-font-family:'DM Serif Display', serif;
}

Answer 1

我没有找到以这种方式覆盖 Bootstrap 的方法。我找到了一个解决方法（至少对于我的用例），您可能会觉得有用。

就我而言，我的资产目录中有两个字体系列作为文件，其中一个用于常规文本，另一个用于粗体文本。

您可以覆盖 Bootstrap 的默认字体系列，然后使用自定义 CSS 类在您需要的地方使用另一个字体系列。

这是我的用例的示例：

// 1. Import Bootstrap's functions
@import "../../node_modules/bootstrap/scss/functions";

// 2. Override default variables. Bootstrap docs: "Variable overrides must come after functions are imported, but before the rest of the imports."

// Import Fonts
@font-face {
  font-family: "First_Font_Regular";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/First_Font_Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Second_Font_Bold";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/Second_Font_Bold.woff2") format("woff2");
}

// Override default font families
$font-family-base: 'First_Font_Regular', sans-serif;
$font-family-sans-serif: 'First_Font_Regular', sans-serif;

// It is not possible to use another font-family for bold text via Bootstrap's .fw-bold, it has to be used via a custom class

.font-bold {
  font-family: "Second_Font_Bold", sans-serif;
}

// Import rest of Bootstrap
@import "../../node_modules/bootstrap/scss/bootstrap";