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

在Bootstrap 4中，字体大小默认使用

em

或

rem

作为字体

---

如何增加所有视口大小的

字体大小

？因为每个元素看起来都很小。

因为Bootstrap 4使用rem作为大多数元素的

字体大小

单位，所以您可以在自己的样式表中的HTML元素上设置

px

中的

字体大小

，这将更改Bootstrap应用于元素的默认大小。我已经包含了一个指向的链接，因此您可以看到它的运行。环境中已加载引导程序4。如果更改

html

选择器的

font size

的值并运行项目，您可以看到元素大小相对于根元素的变化

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

html {
    font-size: 16px;
} 

---

您可以使用

.h1

来

.h6

引导类，或者您可以在这里自定义CSS类并定义字体大小，然后将类放在HTML元素上。

引导4

有一系列类可用于自定义文本：

• h1-h6
• 显示器-1-显示器-4
• 小的

即

名字：{{所选客户。名字}

姓氏：{{selected_customer.Last_name}

< /代码> 你也可以考虑添加这个：

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



当我添加这个时，我的移动浏览器突然显示出合理的文本大小。
您也可以将其设置为em值，但需要在多个大小上进行测试。此方法的主要优点是，它将尊重用户代理和用户样式表的字体大小设置，使有视觉障碍的人更容易访问您的网站。这样的设置对整个页面至关重要。开发人员必须了解其含义。除非定义为
font size:16px，否则不起作用！重要的这些类应该用来表示逻辑结构，而不是控制文本大小。。。我只是在谈论css类。您必须先阅读css类。@ArmandoFox我不同意-HTML类没有HTML元素那样的内在语义值。它们在很大程度上是任意设置样式的钩子，Bootstrap选择了这种约定来精确控制字体大小。@Jon您使用HTML+CSS的里程比我多得多，谢谢您的评论。但是我不得不承认我很惊讶，因为我一直认为正确使用CSS的全部目的是允许HTML元素反映文档的逻辑结构。由于H1到H6表示分层部分，所以我假设.H1到.H6的应用是类似的。不过，我还是遵从你的经验。@ArmandoFox就HTML结构而言，你是绝对正确的-应该根据元素的语义值选择元素（例如，它们应该描述它们所包含的内容），然后机器/机器人可以从这些数据中进行推断。但是类除了作为CSS或JS的钩子之外没有任何意义，因此命名实际上成为开发人员的个人选择。我认为Bootstrap使用了这种约定，因为大多数开发人员直觉上认为“h1大于h2”，所以他们认为这是一种可视化的简单方法（例如，我希望这个元素是
h3
，但样式类似于
h1
）。如果您想要响应性字体大小，可以使用媒体查询<代码>小
不适用于文本区域内容。
<meta name="viewport" content="width=device-width, user-scalable=no" />