关于CSS：如何更改Bootstrap的全局默认字体大小？


How to change Bootstrap's global default font size?

Bootstrap的全局默认字体大小为14px，行高为1.428。如何更改其默认全局设置？

我是否必须在所有多个条目中更改bootstrap.min.css？

有几种方法，但是由于您仅使用CSS版本而不是SASS或LESS版本，因此最好使用Bootstraps自己的自定义工具：

http://getbootstrap.com/customize/

在此页面上自定义任何内容，然后您可以下载具有自己的字体大小和任何其他想要更改的内容的自定义版本。

不建议直接更改CSS文件(或简单地添加覆盖Bootstrap CSS的新CSS样式)，因为其他Bootstrap样式的值均来自基本字体大小。例如：

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52

您会看到基本字体大小用于计算h1，h2，h3等的大小。如果您只是在CSS中更改了字体大小(或添加了自己的优先字体大小)，则所有其他值根据Bootstrap的设计，在计算中使用字体大小的字体将不再按比例精确。

正如我所说，最好的选择是仅使用自己的"自定义"工具。这正是它的用途。

如果使用的是SASS或LESS，则在编译之前将更改变量文件中的字体大小。

相关讨论

Bootstrap使用变量：

1
$font-size-base: 1rem; // Assumes the browser default, typically 16px

我不建议对此进行处理，但是可以。最佳做法是使用以下命令覆盖浏览器的默认基本字体大小：

1
2
3
html {
  font-size: 14px;
}

然后，Bootstrap将获取该值，并通过rems来使用它为各种事物设置值。

相关讨论

您可以添加style.css，在bootstrap.css之后导入此文件以覆盖此代码。

例如：

1
2
3
4
5
6
7
8
9
10
11
/* bootstrap.css */
* {
   font-size: 14px;
   line-height: 1.428;
}

/* style.css */
* {
   font-size: 16px;
   line-height: 2;
}

请勿直接更改bootstrap.css，以更好地维护代码。

相关讨论

从当前的v4文档执行此操作的推荐方法是：

1
2
$font-size-base: 0.8rem;
$line-height-base: 1;

请确保在bootstrap css include上方定义变量，它们将覆盖bootstrap。

不需要其他任何东西，这是最干净的方法

在文档https://getbootstrap.com/docs/4.1/content/typography/#global-settings

在v4中更改SASS变量：

1
$font-size-base: 1rem !default;

在CSS中添加！important

1
2
3
4
* {
   font-size: 16px !importent;
   line-height: 2;
}

我刚刚解决了这类问题。我试图将

字体大小增加到h4大小。我不想使用h4标签。
我在bootstrap.css之后添加了css，但没有用。
最简单的方法是这样的：
在HTML文档上，键入

1
<p class="h4">

您无需在CSS工作表中添加任何内容。工作正常
问题是假设我想要的尺寸介于h4和h5之间？
回答为什么？这是取悦观众的唯一方法吗？
我将更喜欢这种方法来篡改bootstrap之类的标准文档。

相关讨论