如何在 Bootstrap 4 中使用 Sass 更改字体大小? [英] How to change the font size with Sass in Bootstrap 4?

问题描述

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

I am getting crisscross information and wanted to raise the issue here. I have read in some places the font size should be changed from the html element for example:

html { font-size: 14px }

引导程序 4 rem 值将相应地更新文本.

And the bootstrap 4 rem values will update the text accordingly.

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

Interestingly if I keep the html element's font-size to its default and change the bootstrap variables to change the font size, am I doing something wrong?

例如:

html { font-size: 16px }

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

推荐答案

所有的困惑和许多不同的答案.我向 bootstrap 的作者提出了这个问题，以一劳永逸地解决它.

With all the confusion and so many different answers. I approached the authors of bootstrap with the question to clear it up once and for all.

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

It is now crystal that we will need to change $font-size-base which will directly change the root font-size.

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

I was also advised by their contributor to not control the font-size with html element rather change the bootstrap's variable instead.

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

使用提供的 css 示例不适用于 bootstrap 大小的所有方面.

using the supplied css example will not work for all aspects of bootstrap sizing.

scss的编译结果使用了$font-size-base变量来调整很多东西的大小，以后可能会用到更多的领域.

The compiled result of scss uses the $font-size-base variable to size many things and may be used in more areas in the future.

大小元素列表

• 下拉字体
• 按钮字体
• popover 字体
• 输入组字体
• 表单字体
• 重启字体

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

This is an example for your scss files, note that you need to define the $font-size-base BEFORE including bootstrap in your main scss file. In this case, the app.scss file is the one being compiled.

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

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

这篇关于如何在 Bootstrap 4 中使用 Sass 更改字体大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！