通过 CSS 类将自定义字体添加到引导类行？答案

【问题标题】：Adding custom font via CSS class to a bootstrap class line?通过 CSS 类将自定义字体添加到引导类行？
【发布时间】：2020-08-17 07:50:32
【问题描述】：

我知道如何将自定义字体添加到引导驱动的页面，但我不确定是否可以将 CSS 类添加到预先存在的 class 引导行？下面的例子，我不希望所有 's 都有特定的字体，除了一行。

<h1 class="text-center"> Hello World</h1>

我想要引导程序 text-center，但我想更改 CSS 文件上的字体以仅指定这一行。

是否可以应用类似的东西：

.Hello{
  font-family: 'Indie Flower', cursive;
}

针对特定的行？

【问题讨论】：

你可以试试<h1 class="text-center Hello"> Hello World</h1>，如果不行，在你的css上添加!important.Hello class .Hello{ font-family: 'Indie Flower', cursive !important; }

【解决方案1】：

好吧，您在这里有多个选择

第一：覆盖原来的类
侵入 bootstrap 主代码并应用你的字体，在 bootstrap.css 中搜索 text-center，你会看到：

.text-center {
  text-align: center;
}

你可以改成这样：

.text-center {
  text-align: center;
  font-family : 'Indie Flower', cursive;
}

通过这样做，任何具有 text-center 类的元素都将具有 Indie Flower Font。

选项二：创建自己的类名（推荐）

.indie-flower-font{
  font-family: 'Indie Flower', cursive !important;
  //we use !important in such utilites classes to avoid any conflicts
 }

对于 HTML

<h1 class="indie-flower-font">I AM INDIE FLOWER!</h1>

选项三：为所有居中文本创建全局规则

h1.text-center{
 font-family: 'Indie Flower', cursive;
}

所以基本上任何带有 text-center 类的 h1 都会有该字体。

我会推荐选项 2，因为它是最安全且可扩展的选项。

【讨论】：

【解决方案2】：

而不是
<h1 class="text-center"> Hello World</h1>

使用
<h1 class="text-center hello-text"> Hello World</h1>
在 CSS 文件中添加.hello-text{ font-family: 'Indie Flower', cursive; }

或者尝试使用
<h1 class="hello-text"> Hello World</h1> 在 CSS 文件中添加.hello-text{ font-family: 'Indie Flower', cursive; text-align: center; }

【讨论】：