logo标签列表

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

csstwitter-bootstraptwitter-bootstrap-3font-size
83

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

我是否需要在所有多个条目中更改bootstrap.min.css文件？

9个回答
77

Bootstrap使用变量：

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

我不建议你去修改这个，但是你可以这么做。最佳实践是使用以下代码来覆盖浏览器默认的基础字体大小：

```css body { font-size: 16px; } ```
html {
  font-size: 14px;
}

Bootstrap将使用该值通过rems设置各种内容的值。

1
这只适用于Bootstrap V4，因为从V3的像素测量单位变成了V4的rem测量单位，是吗？ - CXJ
3
@CXJ，你是正确的，v3将$font-size-base设置为14px。如果你固定使用v3，建议将该值更改为1rem，然后像上面的示例一样设置html {font-size: 14px}。 - CloudMagick
2
这是正确的答案。非常感谢您的帮助。 - Jay Jay Jay
这在 Bootstrap 5 中不起作用，至少对我而言！ - Mattia Rasulo
@MattiaRasulo 你是否使用了预编译版本的Bootstrap，其中只有CSS文件而没有SASS文件？如果是这样，那么要覆盖样式将会是一场艰苦的战斗，我不建议这样做。这个帖子上被接受的答案提到了使用Bootstrap的自定义工具来下载已编译的CSS，但我相信这将限制您使用版本3。 - CloudMagick
显示剩余3条评论
56
有几种方法可供选择，但由于您只使用CSS版本而不是SASS或LESS版本，最好使用Bootstrap自己的定制工具：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，则需要在编译之前更改变量文件中的字体大小。
3
你如何将自定义功能与npm依赖方法结合使用？ - Wouter Lievens
@WouterLievens 如果您通过 npm、bower 等方式安装 Bootstrap，您可以编辑 SASS/LESS 文件并手动编译它们。但是，如果您希望自定义任何内容，请务必避免通过 npm 等包管理器安装任何东西。最好手动将它们安装到您的项目中，并将它们提交到您的存储库中，因为您将对它们进行自定义。请参阅此问题：https://dev59.com/e4rda4cB1Zd3GeqPNILt - Jake Wilson
4
好的，我会尽力为您进行翻译。以下是需要翻译的内容：This is specifically for bootstrap 3. - Jay Jay Jay
41
你可以添加一个style.css文件，在bootstrap.css之后导入此文件以覆盖此代码。
例如：
/* bootstrap.css */
* {
   font-size: 14px;
   line-height: 1.428;
}

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

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

26
这是一种不好的方式。bootstrap.css 中还有很多其他基于字号和行高的样式，例如标题的大小。如果只更新字体大小，那么其他样式就不会改变。这就是为什么他们有一个配置工具。如果你在他们的工具中更新了字体大小和行高（或者在 less 配置文件中更新），所有基于它们的样式也会被更新。此外，当你使用他们的工具时，bootstrap 会给你一个文件，以后如果需要升级 bootstrap 或决定进行更改，你可以将其导入到工具中。Jake 的回答是最好的。 - ctb
下面的 html 选项更好，否则其他元素内的标签（例如具有 lead 类的 p 标签）将没有相同的字体大小，从而呈现出不一致的外观。 - Martin Costello
16
11
自Bootstrap 5起，您可以通过更改$font-size-root变量来设置默认字体大小。
$font-size-root: 16px;
5
在v4中更改SASS变量：
$font-size-base: 1rem !default;
3

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

减小字体大小的示例：

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

只需简单更改 em 值。

在 Bootstrap 版本 5.2 中，字体大小为 1rem：

font-size-base: 1rem; // 假设浏览器默认值，通常为 16px

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

1em = 16 px

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

1

这是一个老问题，但这个框架一直在不断发展。

在 Bootstrap v5 中，你可以通过 CSS 变量的方式来减小字体大小。

最终，Bootstrap 5 将会不断添加更多的 CSS 变量，以便提供更多实时自定义的功能，而无需总是重新编译 Sass。我们的方法是将源 Sass 变量转换为 CSS 变量。这样，即使您不使用 CSS 变量，您仍然拥有 Sass 的所有功能。这仍在进行中，需要时间来完全实现。

来源: https://getbootstrap.com/docs/5.3/content/reboot/#css-variables

正如引用所述，这项工作正在进行中，大多数变量从 v5.2 开始可用，有些从 v5.3 开始，它们都以 bootstrap 前缀 (--bs-) 开头。

你必须像这样在 body 中设置变量:

<body style="--bs-body-font-size: 1.25rem">
<!--- ... -->
</body>

我强烈建议使用em或rem作为单位。

这种方法已经有文档记录，但很难找到，这些变量分散在所有文档的小部分中。我从来不喜欢重新编译SASS/SCSS的想法，使用这种方法，您可以像其他JS/CSS一样使用CDN。

您可以在bootstrap v5.x页面底部的样式面板中找到大多数这些变量。您可以使用我的页面查看这些变量，目前正在运行v5.3。

-8

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 

<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.

3
“h4”类不仅适用于字体大小，因此更改将产生意想不到的后果。 - danblaker
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接