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

Posted 2023-03-06

【中文标题】如何在 Bootstrap 4 中使用 Sass 更改字体大小？

【英文标题】：How to change the font size with Sass in Bootstrap 4?

【发布时间】：2018-04-05 06:41:38

【问题描述】：

我得到了交叉信息，想在这里提出这个问题。我在某些地方读过字体大小应该从 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

【参考方案1】：

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

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

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

使用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文件。

【讨论】：

我添加了这个答案，因为之前的答案没有考虑元素的 CSS 规则 not 受 Bootstrap 影响的用例（IMO 是规范），并且还添加了关于覆盖的建议默认引导变量以我认为最实用的方式（使用 NPM / NodeJS 工作流的示例）。

【参考方案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;

【讨论】：

一篇好文章：coursetro.com/posts/design/73/…

您可以在此处找到所有变量的列表：github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

$font-size-base 定义了两次，一次在 rem 中，一次在 px 中。你推荐哪一个？

将$font-size-base 更改为像素值而不是rem 值甚至无法编译scss 样式，我找不到任何支持它比html font-size: 12px; 更好的东西

很遗憾，display-* 类似乎不支持 $font-size-base github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L311

【参考方案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;

【讨论】：

是的，我正在使用覆盖，我永远不会更改核心文件中的任何内容......它的基本常识......但这并不能真正回答我的问题......为什么我不能改变使用覆盖方法的引导变量中的基值？

所以我使用@import 拉入引导源，然后我使用自定义文件来修改变量（保持引导文件不变）。

是的，在自定义 css 文件中，您可以添加此代码以在 @import 之后对其进行修改，但是您可以直接添加引导文档中提到的资源。最后你可以用你的自定义 CSS 覆盖默认值。

所以你说只要我使用单独的文件更改变量（原因很明显）；这应该可以吗？如果您更改答案以反映我会接受。

我的问题与使用外部文件更改引导变量直接相关。所以本质上我不是在改变引导文件，而是使用 _custom.scss 来改变引导的基本字体。因此，我将使用 0.875rem 而不是 1rem；这样做不会失去引导程序的任何功能。如果你说我不应该改变引导程序的基本字体大小，你能支持你的理论吗？