如何在 Bootstrap 4 中增加字体大小？答案

【问题标题】：How to increase font-size in Bootstrap 4?如何在 Bootstrap 4 中增加字体大小？
【发布时间】：2018-02-10 11:17:30
【问题描述】：

在 Bootstrap 4 中，字体大小默认为使用 em 或 rem 作为字体。

如何为所有视口大小增加font-size？因为每个元素看起来都很小。

【问题讨论】：

如果您想要响应式字体大小，您可以使用媒体查询。 The bootstrap 4 docs show an example.

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

Bootstrap 4：您可以使用多种类来自定义文本：

h1 - h6
display-1 - display-4
small
lead

即：

<!--class="h3" class="display-3", class="small"-->
<div *ngIf="customer_selected" class="h5">
  <p>First name: {{selected_customer.first_name}}</p>
  <p>Last name: {{selected_customer.last_name}}</p>
</div>

【讨论】：

small 不适用于 textarea 内容。

【解决方案2】：

您可能还想考虑添加以下内容：

<meta name="viewport" content="width=device-width, user-scalable=no" />

当我添加这个时，我的移动浏览器突然显示合理的文本大小。

【讨论】：

【解决方案3】：

您可以使用 .h1 到 .h6 引导类，或者您可以制作自己的自定义 CSS 类并在此处定义字体大小并将您的类放在 HTML 元素。

【讨论】：

这些类应该用于指示逻辑结构，而不是控制文本大小。
我不是在谈论 java 类...我只是在谈论 css 类。你必须先阅读 CSS 类。
@ArmandoFox 我不同意——HTML 类不像 HTML 元素那样具有任何内在的语义价值。它们在很大程度上是任意的样式挂钩，Bootstrap 选择了这种约定来精确控制字体大小。
@Jon 你对 HTML+CSS 的了解比我多得多，谢谢你的评论。我不得不承认我很惊讶，因为我一直认为正确使用 CSS 的全部意义在于让 HTML 元素反映文档的逻辑结构。由于 H1 到 H6 建议分层部分，我假设 .h1 到 .h6 旨在类似地应用。不过我尊重你的经验。
@ArmandoFox 就 HTML 结构而言，您是绝对正确的 - 应根据其语义价值选择元素（例如，它们应该描述它们包含的内容），然后机器/机器人可以从该数据中进行推断.但是类除了作为 CSS 或 JS 的钩子之外没有任何意义，因此命名确实成为开发人员的个人选择。我认为 Bootstrap 使用了这种约定，因为大多数开发人员直观地认为“h1 大于 h2”，所以他们认为这将是一种简单的可视化方式（例如，我希望这个元素是 h3，但样式像 @ 987654324@).

【解决方案4】：

由于 Bootstrap 4 使用 rem 作为其大部分元素的 font-size 单元，您可以在自己的样式表中的 HTML 元素上设置 font-size 中的 px，这将更改 Bootstrap 的默认大小适用于您的元素。我已经包含了一个指向codeply project 的链接，所以你可以看到它的实际效果。环境中已经加载了 Bootstrap 4。如果您更改 html 选择器的 font-size 的值并运行项目，您可以看到元素的大小相对于根元素是如何变化的。

在样式表中添加三行 CSS 应该很容易：

html {
    font-size: 16px;
}

【讨论】：

您也可以将其设置为 em 值，但您需要在多种尺寸下进行测试。这种方法的主要优点是它会尊重用户代理和用户样式表的字体大小设置，使有视觉障碍的人更容易访问您的网站。
这样的设置对整个页面至关重要。开发者必须意识到它的含义。
除非定义为font-size: 16px !important;否则不起作用