Question

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

这是受影响的代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我不知道为什么它不起作用。我已经在HTML中立即加载了它。

Answer 1

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

你可以删除这个和!important。尽量避免在CSS中使用!important，因为它可能在将来引起一系列特异性问题。

Answer 2

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

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

Answer 3

删除，重要其他一切都很好

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Google字体不在我的网站上运行

3 个答案: