Bootstrap 字体用不同的字体覆盖标题和 body

Bootstrap font overwrite with different fonts for heading and body

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

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

来自这个linkBootstrap override using custom.css

custom.css里面的代码如下

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

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

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

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

您可以像这样将其应用于您的标题或您想要的任何标签

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

对于body，如果你想应用 open sans 就这样做

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