为什么我不能在导航栏上更改字体系列？

时间：2019-03-04 19:01:36

标签： html css

我找不到合适的选择器来更改主菜单项的字体类型；而不是下拉列表。

我删除了所有css字体类型，以防万一某些东西覆盖了东西，但没有任何结果。然后，我为每个选择器插入css文件'font-family：cursive'的每一行，但没有一个改变字体。我还注意到，我的文字装饰不适用于菜单项，但现在我要称呼它为丢失的东西。这是我的工作文件：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

.Logo {
  padding: 0px;
}

.wrapper {
  min-height: 100%;
  width: 100%;
  position: relative;
}

body {
  height: 100%;
  background-size: cover;
  background: url("http://photokaz.com/wp-content/uploads/2013/01/New-Web-Belize-Dock-Final-2048.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

a {
  font-family: cursive;
}

h2 {
  padding: 5px;
  background: #646ecb;
  color: #f0f1f5;
  text-align: center;
  font-size: 30pt;
  letter-spacing: 15px;
}


/*background navbar color*/

.navbar {
  background: teal;
  height: 40px;
  width: 700px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

nav a {
  display: inline-block;
  text-decoration: line-through;
  font-weight: bold;
  font-size: 14px;
  color: aliceblue;
  font-family: cursive;
}

nav a:hover {
  color: #ffdc3d;
  text-decoration: underline !important;
}

nav ul {
  list-style: none;
  display: inline-block;
}

nav ul li:hover ul li {
  display: inline-block;
  background: teal;
}

nav ul li {
  float: left;
  width: 140px;
  height: 40px;
  line-height: 40px;
}

nav ul ul li {
  position: relative;
  display: none;
}
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->

  <link rel="stylesheet" type="text/css" href="css/maintravel2.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">



  <title>Round-a-Whirl</title>
</head>

<body>
  <div class="wrapper">
    <header>
      <div></div>
      <h2><img src="HatchfulExport-All/linkedin_banner_image_1.png" height=75 width="auto" class="Logo"></h2>
    </header>
    <div class="navbar">
      <nav>
        <ul>
          <li><a href="#"><i class="fa fa-plane"> Flights</i></a></li>
          <li><a href="#"><i class="fa fa-hotel"> Hotel</i></a></li>
          <li><a href="#"><i class="fa fa-car"> Car Rental</i></a></li>
          <li><a href="#"><i class="fa fa-globe"> Discover</i></a>
            <ul>
              <li>Vacation</li>
              <li>Cruise</li>
              <li>City</li>
              <li>Nature</li>
              <li>Getaways</li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-tag"> Deals</i></a></li>

        </ul>

      </nav>
    </div>
  </div>
  <article>
    This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
  </article>


  <footer>
    Round-a-Whirl &copy; 2019
  </footer>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

4 个答案:

答案 0 :(得分：2)

您的文本在<i>标记内，并且Font-Awesome覆盖了字体系列。请尝试以下方法：

<li><a href="#"><i class="fa fa-plane"></i> Flights</a></li>

答案 1 :(得分：0)

您可能需要提高特异性。 试试：

.navbar nav ul {

答案 2 :(得分：0)

您正在将文本放入<i>标记中，该标记将应用超棒的字体样式。而是这样做。

<li><a href="#"><i class="fa fa-plane"></i>Flights</a></li>

答案 3 :(得分：0)

enter image description here

您以错误的方式使用.fa，字体系列被重写为icon：

.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}

您必须在<i class="fa fa-plane"></i>之后输入文字。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

.Logo {
  padding: 0px;
}

.wrapper {
  min-height: 100%;
  width: 100%;
  position: relative;
}

body {
  height: 100%;
  background-size: cover;
  background: url("http://photokaz.com/wp-content/uploads/2013/01/New-Web-Belize-Dock-Final-2048.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

a {
  font-family: cursive;
}

h2 {
  padding: 5px;
  background: #646ecb;
  color: #f0f1f5;
  text-align: center;
  font-size: 30pt;
  letter-spacing: 15px;
}


/*background navbar color*/

.navbar {
  background: teal;
  height: 40px;
  width: 700px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

nav a {
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
  color: aliceblue;
  font-family: cursive;
}

nav a:hover {
  color: #ffdc3d;
  text-decoration: underline !important;
}

nav ul {
  list-style: none;
  display: inline-block;
}

nav ul li:hover ul li {
  display: inline-block;
  background: teal;
}

nav ul li {
  float: left;
  width: 140px;
  height: 40px;
  line-height: 40px;
}

nav ul ul li {
  position: relative;
  display: none;
}
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->

  <link rel="stylesheet" type="text/css" href="css/maintravel2.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">



  <title>Round-a-Whirl</title>
</head>

<body>
  <div class="wrapper">
    <header>
      <div></div>
      <h2><img src="HatchfulExport-All/linkedin_banner_image_1.png" height=75 width="auto" class="Logo"></h2>
    </header>
    <div class="navbar">
      <nav>
        <ul>
          <li><a href="#"><i class="fa fa-plane"> </i>  Flights</a></li>
          <li><a href="#"><i class="fa fa-hotel"> </i> Hotel</a></li>
          <li><a href="#"><i class="fa fa-car"> </i> Car Rental</a></li>
          <li><a href="#"><i class="fa fa-globe"> </i> Discover</a>
            <ul>
              <li>Vacation</li>
              <li>Cruise</li>
              <li>City</li>
              <li>Nature</li>
              <li>Getaways</li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-tag"></i> Deals</a></li>

        </ul>

      </nav>
    </div>
  </div>
  <article>
    This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
  </article>


  <footer>
    Round-a-Whirl &copy; 2019
  </footer>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

相关问题
最新问题