如何在 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

原文由 webkitfanz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

关于仅使用 CSS 覆盖的注意事项

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

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

大小元素列表

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

-------------- 示例 SCSS ————–

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

应用程序.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;

原文由 webkitfanz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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;
 }

这是 工作小提琴

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

在您的 custom.scss 文件中这样做：

 $custom-variable:0.875rem;

然后像这样使用它：

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

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

原文由 Mr. Pyramid 发布，翻译遵循 CC BY-SA 3.0 许可协议