CSS 如何更改 Bootstrap 的全局默认字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28678542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change Bootstrap's global default font size?
提问by Chetan
Bootstrap's global default font-size is 14px, with a line-height of 1.428. How can I change its default global settings?
Bootstrap 的全局默认字体大小为 14px，行高为 1.428。如何更改其默认全局设置？
Will I have to change bootstrap.min.css in all the multiple entries?
我是否必须在所有多个条目中更改 bootstrap.min.css？
采纳答案by Jake Wilson
There are several ways but since you are using just the CSS version and not the SASS or LESS versions, your best bet to use Bootstraps own customization tool:
有几种方法，但由于您只使用 CSS 版本而不是 SASS 或 LESS 版本，因此最好使用 Bootstraps 自己的自定义工具：
http://getbootstrap.com/customize/
http://getbootstrap.com/customize/
Customize whatever you want on this page and then you can download a custom build with your own font sizes and anything else you want to change.
在此页面上自定义您想要的任何内容，然后您可以使用您自己的字体大小和您想要更改的任何其他内容下载自定义版本。
Altering the CSS file directly (or simply adding new CSS styles that override the Bootstrap CSS) is not recommended because other Bootstrap styles' values are derived from the base font size. For example:
不建议直接更改 CSS 文件（或简单地添加覆盖 Bootstrap CSS 的新 CSS 样式），因为其他 Bootstrap 样式的值源自基本字体大小。例如：
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52
You can see that the base font size is used to calculate the sizes of the h1, h2, h3 etc. If you just changed the font size in the CSS (or added your own overriding font-size) all the other values that used the font size in calculations would no longer be proportionally accurate according to Bootstrap's design.
您可以看到基本字体大小用于计算 h1、h2、h3 等的大小。如果您只是更改了 CSS 中的字体大小（或添加了您自己的覆盖字体大小），则所有其他使用根据 Bootstrap 的设计，计算中的字体大小将不再按比例准确。
As I said, your best bet is to just use their own Customize tool. That is exactly what it's for.
正如我所说，最好的办法是使用他们自己的自定义工具。这正是它的用途。
If you are using SASS or LESS, you would change the font size in the variables file before compiling.
如果您使用 SASS 或 LESS，您将在编译前更改变量文件中的字体大小。
回答by Alessander Fran?a
You can add a style.css, import this file after the bootstrap.cssto override this code.
您可以style.css在bootstrap.css覆盖此代码之后添加一个, 导入此文件。
For example:
例如：
/* bootstrap.css */
* {
font-size: 14px;
line-height: 1.428;
}
/* style.css */
* {
font-size: 16px;
line-height: 2;
}
Don't change bootstrap.cssdirectly for better maintenance of code.
不要bootstrap.css为了更好地维护代码而直接更改。
回答by CloudMagick
Bootstrap uses the variable:
Bootstrap 使用变量：
$font-size-base: 1rem; // Assumes the browser default, typically 16px
I don't recommend mucking with this, but you can. Best practice is to override the browser default base font size with:
我不建议搞砸这个，但你可以。最佳做法是使用以下内容覆盖浏览器默认基本字体大小：
html {
font-size: 14px;
}
Bootstrap will then take that value and use it via rems to set values for all kinds of things.
Bootstrap 然后将获取该值并通过 rems 使用它来为各种事物设置值。
回答by Paul Odeon
The recommended way to do this from the current v4 docs is:
从当前的 v4 文档中推荐的方法是：
$font-size-base: 0.8rem;
$line-height-base: 1;
Be sure to define the variables above the bootstrap css include and they will override the bootstrap.
请务必在 bootstrap css include 上方定义变量，它们将覆盖 bootstrap。
No need for anything else and this is the cleanest way
不需要任何其他东西，这是最干净的方式
It's described quite clearly in the docs https://getbootstrap.com/docs/4.1/content/typography/#global-settings
它在文档https://getbootstrap.com/docs/4.1/content/typography/#global-settings中有非常清楚的描述
回答by Jeremy Lynch
In v4 change the SASS variable:
在 v4 中更改 SASS 变量：
$font-size-base: 1rem !default;
回答by Olu Adabonyan
I just solved this type of problem. I was trying to increase
我刚刚解决了这类问题。我试图增加
font-size to h4 size. I do not want to use h4 tag. I added my css after bootstrap.css it didn't work. The easiest way is this: On the HTML doc, type
字体大小到 h4 大小。我不想使用 h4 标签。我在 bootstrap.css 之后添加了我的 css，但它不起作用。最简单的方法是：在 HTML 文档中，输入
<p class="h4">
You do not need to add anything to your css sheet. It works fine Question is suppose I want a size between h4 and h5? Answer why? Is this the only way to please your viewers? I will prefer this method to tampering with standard docs like bootstrap.
您无需在 css 表中添加任何内容。它工作正常问题是假设我想要 h4 和 h5 之间的大小？回答为什么？这是取悦观众的唯一方法吗？我更喜欢这种方法来篡改像引导程序这样的标准文档。
