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无效，显示默认字体

2 个答案: