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

Question

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

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

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

是否可以应用类似的内容：

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

针对该特定行？

Answer 1

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

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

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

Answer 2

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

第一：覆盖原始类
进入bootstrap主代码并应用您的字体，在bootstrap.css中搜索文本中心，您将看到：

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

您可以将其更改为：

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

这样做，任何具有文本中心类的元素都将具有Indie Flower字体。

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

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

因此，基本上任何具有文本中心类的h1都将具有该字体。

我会建议选择2，但是，因为它是最安全且可扩展的。