@font face无效

Question

我正在尝试将Futura web字体添加到我的网页，但是当我将其添加到名为fonts.css的独立css文件时

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

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

h1{
  font-family: futura;
}

但是当我使用网络检查器（firefox）浏览我的文件时字体不会改变我看到字体系列是坐在futura但是当我检查字体时我得到了这个：

但是futura不是那种（serif字体）我的文件层次结构就像这样

• 根文件夹

  • Page.htm
  • JS
    • Java.js

  • CSS

    • fonts.css
    • 的style.css

  • 字体

    • Futura LT Book.ttf
    • Futura LT Light.ttf

可能出现什么问题？

更新：

我使用的是firefox

Answer 1

也许您的字体文件存在问题，而且不适用于网络。 您可以使用其中一个在线转换器（如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;
}

Answer 2

试试这个

取代：

@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 3

我认为你的src上需要双周期（..），这意味着你上一个文件夹，然后查找斜杠后面的文件夹。例如： src：url（＆＃39; ../ fonts / Futura LT Bold.ttf＆＃39;）

另一个问题可能是您的浏览器可能不支持。 ttf font-files，你需要添加.eot。