Question

所以我想知道如何更改Bootstrap 4中的H1字体系列？似乎无法做到这一点..我对这个引导程序有点新意，所以我在Youtube上关注了一个教程，但他们没有解释如何更改字体系列。

请参阅此处的代码:(我删除了我的CSS，因为它根本不起作用，老实说我甚至不知道我在做什么）

  <div class="container">
    <h1 class="display-2">Hello, World!</h1>
    <p class="lead">This is a paragraph, you can say a lot of things in here!.</p>
  </div>

完整代码：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="stylesheet.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-light bg-info">
    <button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="index.html">Home</a>
          <a class="nav-item nav-link" href="about.html">About</a>
          <a class="nav-item nav-link" href="port.html">Work</a>
          <a class="nav-item nav-link" href="contact.html">Contact</a>
        </div>
  </div>
</nav>

<div class="jumbotron jumbotron-fluid bg-info text-white text-center" style="background: #aaa">
  <div class="container">
    <h1 class="display-2">Hello, World!</h1>
    <p class="lead">This is a paragraph, you can put text in me.</p>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 1

您正在以错误的顺序加载样式表 - 首先需要是Bootstrap css然后是你的（假设stylesheet.css是你在h1上设置备用字体系列的地方）） - 这样你就可以在加载bootstrap之后覆盖BS样式。以下显示了应加载样式表的顺序：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<link rel="stylesheet" href="stylesheet.css">

作为备用字体系列的演示：以下显示2 h1＆ - 我正在加载替代字体系列

＆＃13;

.alternate-font {
   font-family:"Montserrat"
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">-

<h1>This is a h1 using standard bootstrap h1 font-family</h1>
<h1 class="alternate-font">This is a h1 using Montserrat font-family</h1>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

＆＃13;

Answer 2

更改h1的字体系列，你不需要引导程序！您只需要一个CSS样式表代码来改变它。像这样的东西：

{{1}}

在bootstrap 4中更改H1 font-family

2 个答案: