Google 字体在我的网站上不起作用

Question

我尝试在 CSS 中添加重要标签，我检查了开发控制台是否有任何错误，但没有任何显示。我不知道为什么会这样。

这是受影响的代码：

.links-text {
  font-family: 'Work Sans', sans-serif, !important;
  display: block;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 15px;
  text-align: center;
  color: black;
  font-size: 1.4em;
  font-weight: 800;
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,700,800" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="oth_style.css">
  <link rel="stylesheet" type="text/css" href="oth_responsive.css">
  <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, intial-scale=1.0">
  <title>Over The Horizion</title>
</head>

<body>
  <nav class="col-12">
    <div class="navbar">
      <ul>
        <li class="navli"><a class="links-text" href="oth_quote.html.">Get A Quote</a>
        </li>
        <li class="navli"><a class="links-text" href="oth_portfolio.html">Portfolio</a>
        </li>
        <li class="navli"><a class="links-text" href="oth_services.html">Services</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

我不知道为什么它不起作用。我已经在 HTML.

中立即加载了它

Answer 1

删除 css 中 sans-serif 后的逗号。

您可以同时删除这个和 !important。尽量避免在你的 CSS 中使用 !important，因为它可能会在未来引起一堆特异性问题。

Answer 2

您不需要 !important。删除它。尝试将以下内容添加到 CSS 的顶部：

html body {
  font-family: 'Work Sans', sans-serif;
}

Answer 3

去掉，重要的其他都没问题

.links-text {
  font-family: 'Work Sans', sans-serif;
  display: block;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 15px;
  text-align: center;
  color: black;
  font-size: 1.4em;
  font-weight: 800;
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,700,800" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="oth_style.css">
  <link rel="stylesheet" type="text/css" href="oth_responsive.css">
  <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, intial-scale=1.0">
  <title>Over The Horizion</title>
</head>

<body>
  <nav class="col-12">
    <div class="navbar">
      <ul>
        <li class="navli"><a class="links-text" href="oth_quote.html.">Get A Quote</a>
        </li>
        <li class="navli"><a class="links-text" href="oth_portfolio.html">Portfolio</a>
        </li>
        <li class="navli"><a class="links-text" href="oth_services.html">Services</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

Google 字体在我的网站上不起作用

Google fonts isn't working on my website

html

css

google-font-api