如何在引导程序的“标题”上使用与 Google Fonts 不同的字体？答案

【问题标题】：How to use different font from Google Fonts on "Headings" of bootstrap?如何在引导程序的“标题”上使用与 Google Fonts 不同的字体？
【发布时间】：2020-10-15 01:52:22
【问题描述】：

我使用带有以下代码的 custom.SCSS 文件更改整个引导程序的字体系列：

      //Import Fonts
    @import url('https://fonts.googleapis.com/css2? 
    family=Roboto:wght@100;300;400;500;700;900&display=swap');
    
    $font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif !default;
    
    $headings-font-family: inherit;
    $headings-font-weight: 900;
    
    // Override default variables before the import
    $body-bg: #ffff;

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

但我没有找到我必须覆盖哪个 SCSS 变量，我只想更改 Bootstrap 上所有标题的字体样式和系列，而不是更改 de

或其他。

【问题讨论】：

标签： css reactjs bootstrap-4 sass

【解决方案1】：

您的代码显示$headings-font-family: inherit;，这意味着标题将使用它所在的容器使用的任何字体。

如果您希望标题使用不同的字体，则必须在 $headings-font-family 变量中声明。

$headings-font-family: $font-family-sans-serif;

这将导致标题使用$font-family-sans-serif 定义的字体。

编辑

您应该首先包含 Bootsrap，然后添加您的修改，否则它们可能会被覆盖！

【讨论】：