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

Posted 2023-03-06

【中文标题】如何更改 Bootstrap 的全局默认字体大小？

【英文标题】：How to change Bootstrap's global default font size?

【发布时间】：2015-04-25 01:22:52

【问题描述】：

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

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

【参考方案1】：

Bootstrap 使用变量：

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

我不建议这样做，但你可以。最佳做法是使用以下命令覆盖浏览器默认的基本字体大小：

html 
  font-size: 14px;

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

【讨论】：

这仅在 Bootstrap V4 中，因为从 V3 px 测量到 V4 rem 测量的变化，对吗？

@CXJ 你是对的，v3 将$font-size-base 设置为14px。如果您绑定到 v3，我建议将该值更改为 1rem，然后按照上面的示例设置 html font-size: 14px。

这是最好的方法。一旦您将其更改为 14px，Bootstrap 4 将神奇地像 v3 一样大小。现在要对那种荒谬的明亮原蓝色做点什么......

这是正确的答案。发自内心的感谢你

【参考方案2】：

有多种方法，但由于您只使用 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，则需要在编译前更改变量文件中的字体大小。

【讨论】：

如何将此自定义功能与 npm 依赖方法结合起来？

@WouterLievens 如果您通过npm、bower 等安装 Bootstrap，您当然可以编辑 SASS/LESS 文件并手动编译它们。但是我绝对会避免通过包管理器安装任何东西，例如npm 您希望自己完全自定义。最好将它们手动安装到您的项目中并将它们提交到您的存储库，因为您要自定义它们。看到这个问题：***.com/questions/30058758/…

这是专门为 bootstrap 3 设计的

【参考方案3】：

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

例如：

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


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

不要为了更好地维护代码而直接更改bootstrap.css。

【讨论】：

这是一个糟糕的方法。 bootstrap.css 中还有很多基于字体大小和行高的其他样式，例如标题的大小。如果你只是更新字体大小，其他都不会改变。这就是为什么他们有一个配置工具。如果您在他们的工具（或较少的配置文件）中更新字体大小和行高，所有基于它们的样式也将被更新。此外，当您使用他们的工具时，bootstrap 会为您提供一个文件，如果您正在升级 bootstrap 或决定要进行更改，您可以稍后将其导入到他们的工具中。杰克的回答是最好的。

下面的html 选项更好，否则其他元素中的标签（例如带有lead 类的p）将不会具有相同的字体大小，从而产生不一致的外观。

【参考方案4】：

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

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

请务必在引导 css 包含上方定义变量，它们将覆盖引导。

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

在文档https://getbootstrap.com/docs/4.1/content/typography/#global-settings中描述得很清楚

【参考方案5】：

在 v4 中更改 SASS 变量：

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

【参考方案6】：

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

$font-size-root: 16px;

【参考方案7】：

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

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

<p class="h4">

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

【讨论】：

h4 类不仅仅适用于字体大小，因此这种更改会产生意想不到的后果。