CSS @font-face 不工作，显示默认字体答案

【问题标题】：CSS @font-face not working, default font shownCSS @font-face 不工作，显示默认字体
【发布时间】：2017-05-13 11:54:04
【问题描述】：

我正在尝试在我的网页上使用自定义字体，但它不起作用。知道为什么吗？

@font-face {
  font-family: 'raleway';
  src: url("Raleway-Regular.tff") format("truetype");
}

.logoarea {
  float: left;
}

.logo {
  width: 120px;
  height: 74px;
}
.topnavbar {
  font-family: 'raleway';
}

那是我的 CSS 代码。我已经检查过文件的拼写是否正确。 css 和我的字体在同一个目录中。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <!-- TEMP - AUTO REFRESH -->
  <meta http-equiv="refresh" content="2" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <title>OJMari</title>
</head>
<body>
  <div class="logoarea">
    <img src="images/logo.png" alt="OJMari Logo" class="logo" />
  </div>
  <div class="topnavbar">
    test
  </div>
</body>
</html>

那是我的 html 代码。我看不出有什么问题。

我已经验证了这两个，所以有人知道为什么会这样吗？对于那些好奇的人，这就是我在 Google Chrome 59 上的 html 输出的样子。 HTML Output

【问题讨论】：

您确定文件类型是.TFF 而不是.TTF？
相关：stackoverflow.com/questions/14393302/…

标签： html css fonts font-face

【解决方案1】：

字体类型似乎格式不正确。请将字体扩展名更改为 .ttf

@font-face {
  font-family: 'raleway';
  src: url("Raleway-Regular.ttf") format("truetype");
}

【讨论】：

哇，谢谢！我认为这可能是一个愚蠢的错误......我改变了它，字体现在可以正常工作了。

【解决方案2】：

问题是不同的浏览器需要不同的字体文件格式，见：https://help.webflow.com/article/list-of-font-file-types-for-maximum-browser-support

不确定你是否使用 sass，但这应该让你明白我的意思：

https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

【讨论】：