为什么字体系列不能处理我的导航链接？答案

【问题标题】：Why isn't font-family working on my navigation links?为什么字体系列不能处理我的导航链接？
【发布时间】：2015-04-02 21:38:42
【问题描述】：

我有一个导航栏，其中的链接似乎忽略了我的字体系列规则。颜色和大小都很好，但我似乎无法正确更改字体。这是 HTML：

<div id="navigation">
<ul>
<li><a href="#" class="currentpage">HOME</a></li>
<li><a href="music.html" class="nav">MUSIC</a></li>
<li><a href="live.html" class="nav">LIVE</a></li>
<li><a href="contact.html" class="nav">CONTACT</a></li>
</ul>
</div>

这是 CSS：

#navigation {
margin-top: 20px;
width: 100%;
text-align: center;
}

#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#navigation li {
display: inline;
}

a.nav {
display: inline-block;
width: 25%
font-family: "Century Gothic", Arial;
color: #ffffff;
font-size: 36px;
text-decoration: none;
}

a.currentpage {
display: inline-block;
width: 25%
font-family: "Century Gothic", Arial;
color: #aa00ff;
font-size: 36px;
text-decoration: none;
}

为什么我的其他规则很好，但字体系列被忽略了？谢谢。

【问题讨论】：

你可能想看看这个stackoverflow.com/questions/2186714/…

标签： html css fonts

【解决方案1】：

上一条语句后缺少分号。

这使得它和 font-family 声明无效。

如果您有used a validator，就会检测到这一点。

【讨论】：

我一直在尝试各种不同的可能解决方案，我不敢相信我错过了这么愚蠢的事情。谢谢！

【解决方案2】：

您需要在宽度值之后添加分号。

a.nav {
    display: inline-block;
    width: 25%;
    font-family: "Century Gothic", Arial;
    color: #ffffff;
    font-size: 36px;
    text-decoration: none;
}

a.currentpage {
    display: inline-block;
    width: 25%;
    font-family: "Century Gothic", Arial;
    color: #aa00ff;
    font-size: 36px;
    text-decoration: none;
}

【讨论】：

【解决方案3】：

a.nav 将选择页面上具有“nav”类的任何“a”元素。这些不存在，因此您的规则不会生效。

我将此选择器切换为“#navigation a”，它匹配您的#navigation div 中的所有项目。（第 18 行）

代码如下：

.navigation a {
  display: inline-block;
  width: 25%;
  font-family: "Century Gothic", Arial;
  color: #ffffff;
  font-size: 36px;
  text-decoration: none;
}

CodePen with the change

您的样式仍然存在，只是您没有应用它们！ :)

【讨论】：

“这些不存在”——是的，它们存在。