如何更改Bootstrap的全局默认字体大小？

Question

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

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

Answer 1

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

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

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

您可以看到基本字体大小用于计算 h1、h2、h3 等的大小。如果您只是在 CSS 中更改了字体大小（或添加了您自己的覆盖字体-大小）根据 Bootstrap 的设计，在计算中使用字体大小的所有其他值将不再按比例准确。

正如我所说，最好的办法是使用他们自己的自定义工具。这正是它的用途。

如果您使用 SASS 或 LESS，您需要在编译前更改变量文件中的字体大小。

Answer 2

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

例如：

/* bootstrap.css */
* {
   font-size: 14px;
   line-height: 1.428;
}

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

不要直接更改bootstrap.css以便更好地维护代码。

Answer 3

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

font-size 增加到 h4 大小。我不想使用 h4 标签。我在 bootstrap.css 之后添加了我的 css 它不起作用。最简单的方法是这样的：在 HTML 文档中，键入

<p class="h4">

您无需向 css sheet 添加任何内容。它工作正常问题是假设我想要 h4 和 h5 之间的尺寸？回答为什么？这是取悦观众的唯一方法吗？我更喜欢这种方法来篡改 bootstrap.

等标准文档

Answer 4

在 v4 中更改 SASS 变量：

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

Answer 5

Bootstrap 使用变量：

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

我不建议搞砸这个，但你可以。最佳做法是使用以下内容覆盖浏览器默认基本字体大小：

html {
  font-size: 14px;
}

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

Answer 6

从当前 v4 文档推荐的方法是：

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

一定要定义 bootstrap css 包含的变量，它们将覆盖 bootstrap.

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

Answer 7

从 Bootstrap5 开始，您可以通过更改 $font-size-root 变量来设置默认字体大小。

$font-size-root: 16px;

Answer 8

我通过 CDN（内容分发网络）使用 Bootstrap，所以我用这种简单的方法解决了这个问题。在 <html> 标签中更改全局默认值 font-size。

较小 font-size 的示例：

<html style="font-size:0.875em">

简单更改 em 值。

使用Bootstrap版本5.2字体大小为1rem:

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

0.875em = 14px，如果默认浏览器字体大小为 16px

1em = 16 像素

1.125em = 18px，如果默认浏览器字体大小为 16px

How to change Bootstrap's global default font size?