Bootstrap 字体覆盖标题和正文的不同字体答案

【问题标题】：Bootstrap font overwrite with different fonts for heading and bodyBootstrap 字体覆盖标题和正文的不同字体
【发布时间】：2017-02-24 19:49:47
【问题描述】：

我一直在尝试对标题应用不同的引导字体，对正文应用不同的字体。我查看了各种来源，并仅在通过覆盖更改引导 css 的整体字体样式时找到了解决方案。

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

custom.css里面的代码如下

body{
   font-family: 'Calibri', arial; 
}

.grid{
   border:solid 1px #000;
}

.img-fix{
   width:100%;
   height:auto;
}

但这将 Bootstrap 中的所有字体更改为“Calibri”字体。但我只想将“Calibri”应用于标题，并将任何其他字体样式应用于正文，例如“open-sans”应用于文本正文。请让我知道如何实现这一目标。谢谢！

【问题讨论】：

【解决方案1】：

你可以把它应用到你的标题或你想要的任何标签上

h1, h2, h3, h4, h5, h6{
     font-family: 'Calibri', arial, sans-sarif; 
}

如果你想申请open sans，那么就这样做

body{
     font-family: 'open-sans', arial, sans-sarif; 
}

【讨论】：