@font face 不起作用

Question

我正在尝试将 Futura 网络字体添加到我的网页，但是当我将其添加到名为 fonts.css

的独立 css 文件时

@font-face {
   font-family: futura;
   src: url('/fonts/Futura LT Bold.ttf')
}

然后我将其添加到我的 css 主文件中：

h1{
  font-family: futura;
}

但是当我使用网络检查器 (firefox) 浏览我的文件时，字体没有改变，我看到字体系列是 futura，但是当我检查字体时，我得到这个:

但 futura 不是那样的（衬线字体）我的文件层次结构是这样的

根文件夹
- Page.htm
- JS
  - Java.js
- css
  - fonts.css
  - style.css
- 字体
  - Futura LT Book.ttf
  - Futura LT Light.ttf

可能出了什么问题？

更新：

我用火狐

Answer 1

试试这个

替换：

@font-face {
   font-family: futura;
   src: url('/fonts/Futura LT Bold.ttf')
}

与：

@font-face {
   font-family: futura;
   src: url("../fonts/Futura LT Bold.ttf")
}

Answer 2

我认为你的 src 需要双句点 (..)，这意味着你向上一个文件夹，然后查找斜杠后面的文件夹。例如：来源：url('../fonts/Futura LT Bold.ttf')

另一个问题可能是您的浏览器可能不支持。 ttf字体文件，需要添加.eot.

Answer 3

可能是您的字体文件有问题，不适用于网络。您可以使用 http://www.font2web.com/ 等在线转换器之一将字体转换为所有字体格式文件，并使用下面的 css 实现您的字体

 @font-face {
    font-family: 'Conv_FREESCPT';
    src: url('fonts/FREESCPT.eot');
    src: local('☺'), url('fonts/FREESCPT.woff') format('woff'), url('fonts/FREESCPT.ttf') format('truetype'), url('fonts/FREESCPT.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font face 不起作用

@font face is not working

html

css

fonts

更新：

替换：

与：