如何在bootstrap 5中使用两个字体系列

khbbv19g  于 2023-08-01  发布在  Bootstrap
关注(0)|答案(1)|浏览(130)

我正在用bootstrap 5构建一个react项目,我想在项目中添加2个字体家族。我已经改变了defalut引导字体家族使用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;
}

字符串

lbsnaicq

lbsnaicq1#

我没有找到以这种方式覆盖Bootstrap的方法。我发现了一个变通方法(至少对于我的用例),您可能会发现它很有用。
在我的例子中,我的assets目录中有两个字体系列文件,一个用于常规文本,另一个用于粗体文本。
您可以覆盖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";

字符串

相关问题