CSS未将"Avenir Next"识别为我的字体系列

Question

我正在使用CSS来设置标题，其中所有菜单应该使用"Avenir Next"字体。但是它没有识别它，而是显示为简单的Arial。

我的代码如下：

#main .Header .mainnav ul {
  float: left;
  list-style: none;
  margin: -17px 0 0;
  padding: 0;
  font-family: Avenir Next !important;
  font-size: 14px; 
} 

- Aakash Kumar

---

1. 尝试使用引号括起来："Avenir Next"；
2. 确保您的字体已正确加载（检查 net 面板）。

- Fabrizio Calderan

仍然没有起作用。我刚刚添加了一个空格并重新加载了页面。仍然显示为Arial。 - Aakash Kumar

几件事情：你的系统有这个字体名称吗？如果没有，你尝试加载它了吗？如果没有，为什么？如果是，它能正常工作吗（加载）？ - Yoshi

不，我的电脑上没有。我是为客户制作的。这并不是必要的，访问我的网站的用户不需要拥有 Avenir Next 字体。那么除了我必须在本地安装 Avenir next 之外，还有什么解决方案呢？ - Aakash Kumar

如果您觉得某个答案解决了问题，请点击绿色的勾选标记将其标记为“已接受”。这有助于保持对仍未得到答案的旧SO的关注。 - Vedant Terkar

Answer 1

尝试：

#main .Header .mainnav ul {
    float: left;
    list-style: none;
    margin: -17px 0 0;
    padding: 0;
    font-family: "Avenir Next" !important;
    font-size: 14px; 
}

这是因为字体名称中有" "空格。

通过查看您的最后一条评论，我建议您在页面中托管一个字体文件，可以使用.ttf、.ote或.otf格式，并将该文件链接到您的页面中。

然后使用此代码：

@font-face {
  font-family: 'Avenir Next';
  src: url("http://www.yoursite.com/fonts/Avenir_Next.otf"); /* File to be stored at your site */
  }

即使您的字体未安装在客户计算机上，这也将有所帮助。

希望这能帮到您。祝福您:)！

- Vedant Terkar

---

仍然无法识别.. :( - Aakash Kumar

你的电脑安装了那种字体吗？ - Vedant Terkar

我不明白为什么这个答案被踩了。它是一个合法的解决方案！+1 - Terry

我认为这更像是一个建议，因为根据我们从问题中所了解的情况，这可能只是几种可能解决方案之一。 - Fabrizio Calderan

非常感谢。它以这种方式工作了。 :) - Aakash Kumar