無法更改頂部導航欄CSS中的字體設定-有解無憂

我嘗試將頂部導航欄的字體系列更改為 Ubuntu，但未成功。目前，文本沒有改變，正在恢復到這個默認值。

我已經嘗試將其更改為 div 并提高特異性，但它不起作用。我不確定它是否被我放在上面的字體設定覆寫了？將不勝感激任何指導！

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
@importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Roboto Mono:400,700');
* {
  font-family: system-ui, sans-serif;
}

* {
  margin: 0;
  padding: 0;
}

header {
  font-family: 'Ubuntu';
}

body {
  font-family: 'Montserrat';
  text-align: left;
}


/*typography*/

h1 {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: bold;
  font-size: (45px 1vw);
  line-height: 55px;
  text-align: center;
  letter-spacing: 1px;
}

h2 {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: calc(30px 1vw);
  line-height: calc(37px 1vw);
  letter-spacing: 1px;
  color: #FFFFFF;
}

h3 {}

ul {
  list-style: inside disc;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  font-size: calc(16px 1vw);
  line-height: calc(22px 1vw);
  color: #FFFFFF;
}


/* Header */

header {
  width: 100%;
  height: 122px;
  background: #FFFFFF;
  position: fixed;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
}

.logo {
  width: 30%;
  float: left;
  text-align: left;
  line-height: 122px;
}

nav {
  float: center;
  line-height: 122px;
}

nav a {
  font-family: 'Ubuntu';
  text-decoration: none;
  letter-spacing: 4px;
  font-size: calc(50px 1vw);
  color: #616161;
  padding: 36px 10px;
  margin: 0 1 px;
}

nav a:hover {
  background: #F3EA65;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <!-- <div > -->
  <header>
    <div class="wrapper">
      <div class="logo">
        <img src="asdf.png" alt="Logo" width="25%" ;>
      </div>
      <nav>
        <a href="#">about</a>
        <a href="#">our team</a>
        <a href="#">who we help</a>
        <a href="#">get involved</a>
        <a href="#">Contact</a>
        <a href="#">Donate</a>
      </nav>
    </div>
  </header>

uj5u.com熱心網友回復：

最好在 HTML 的 header 標簽中包含字體鏈接，然后運行。同時在第二個鏈接中@import 后添加空格。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/366387.html

標籤：html css

上一篇：需要Javascript幫助下拉選單onclick問題

下一篇：AngularNgFor路徑問題