如何在 Bootstrap 4 中使用 Sass 更改字体大小？

Question

我得到了交叉信息，想在这里提出这个问题。我在某些地方读过字体大小应该从 html 元素更改，例如：

html { font-size: 14px }

并且 bootstrap 4 rem 值将相应地更新文本。

有趣的是，如果我将 html 元素的字体大小保持为其默认值并更改引导变量以更改字体大小，我做错了什么吗？

例如：

html { font-size: 16px }

// Changing bootstrap variable to 
$font-size-base: 0.875rem //instead of 1rem

Answer 1

我建议您直接更新 html {font-size: 16px} 属性，而不是更改 Bootstrap 的 $font-size-base，原因如下：

1. html的字体大小将直接用于计算最终字体大小。使用 "intermediary" 没有任何好处，即 body 正在被 Bootstrap 的 $font-size-base 调整。

2. Bootstrap 的 SCSS 系统使用 $font-size-base 计算标题大小等，因此所有受 Bootstrap 影响的 CSS 规则都会受到影响，其中包括 body（设置为 $font-size-base$）。
   但是，浏览器计算 rem 中相对于 html {font-size} 的任何 CSS 字体大小规则，不来自 $font-size-base 受影响的元素（如 body）。

3. 使用px 设置html {font-size} 将影响任何rem 值，无论是在Bootstrap 受影响的元素内部还是外部，如果这是您想要实现的。

相反，如果您只想为受 Bootstrap 影响的元素设置大小，请设置 $font-size-base 相对于 html {font-size}，因此 Bootstrap 之外的 CSS 元素将不 受到影响。但我想说这更像是一种边缘情况，而不是常态。

注意：
如果您正在设置$font-size-base 或任何其他引导变量，则不必修改variables.scss 文件。您应该在导入node_modules/bootstrap/scss/variables 和其他Bootstrap 文件之前 定义变量，以便使用您的值而不是Bootstrap 中设置的!default 值。优点：无需编辑整个variables.scss文件。

Answer 2

带着所有的困惑和许多不同的答案。我向 bootstrap 的作者提出了一个一劳永逸的问题。

现在我们需要更改 $font-size-base 这将直接更改根字体大小。

他们的贡献者还建议我不要使用 html 元素控制字体大小，而是更改引导程序的变量。

参考号：https://github.com/twbs/bootstrap/pull/24060

注意仅使用 CSS 覆盖

使用提供的 css 示例不适用于引导大小调整的所有方面。

scss 的编译结果使用$font-size-base 变量来调整很多东西的大小，将来可能会在更多领域使用。

List of sized elements

• 下拉字体
• 按钮字体
• 弹出式字体
• 输入组字体
• 表格字体
• 重启字体

------------- 示例 SCSS --------------

这是您的 scss 文件的示例，请注意，您需要在主 scss 文件中包含引导程序之前定义 $font-size-base。在这种情况下，app.scss 文件就是正在编译的文件。

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables -- this is where you defined the variables 
//              BEFORE importing bootstrap which will use it's  
//              defaults if the variable is not predefined.
@import "variables";
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// @import "datatables";
@import "datatables.min";

_variables.scss

// Body
$body-bg: #ffffff;

// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

Answer 3

Bootstrap 将 font-size 定义为 _reboot.scss 为基础

body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
}

注意：- 切勿将默认值更改为框架文件，始终使用自定义 css/js 文件修改值。

因此，为了将您的字体大小更改为 14px，请在您自己的 style.css（自定义 css 文件）中使用它

body {
    font-size: 0.875rem;
 }

这里是working fiddle

使用 !important 您无法看到您的更改以覆盖默认更改。

在您的 custom.scss 文件中执行以下操作：

$custom-variable:0.875rem;

然后像这样使用它：

@import "./src/scss/_modules/custom"; 
@import "./bower_components/bootstrap/scss/bootstrap";

body {
font-size:$custom-variable;
}