CSS @font-face 无效，显示默认字体

Question

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

@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

Answer 1

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

不确定您是否使用 sass，但这应该让您了解我的意思：

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

Answer 2

字体类型好像格式不对。请将字体扩展名更改为 .ttf

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

CSS @font-face 无效，显示默认字体

CSS @font-face not working, default font shown

html

css

fonts

font-face