@font-face 仅在 Firefox 中不起作用答案

【问题标题】：@font-face not working in firefox only@font-face 仅在 Firefox 中不起作用
【发布时间】：2012-05-18 00:25:43
【问题描述】：

使用这个@font-face css。适用于 Chrome、Safari 和 IE，但不适用于 Firefox。所有需要的文件都上传到服务器。

CSS：

@font-face {
        font-family: 'Calgary';
      src: url('../fonts/calgary.eot');
      src: url('../fonts/calgary.eot?#iefix') format('embedded-opentype'),
                 url('../fonts/calgary.woff') format('woff'),
                 url('../fonts/calgary.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
}

#header-text-webform {
  position: relative;
  top: 59px;
  left: 20px;
  font-family: 'Calgary', 'Helvetica', 'Arial', sans-serif !important;
  color: white;
  font-size: 26px;
  font-weight: normal;
  text-transform: uppercase;
  z-index: 1;
}

【问题讨论】：

任何资源加载问题？如果它只发生在 Firefox 中，这似乎是一个奇怪的问题

标签： firefox css

【解决方案1】：

您有一个重复的 src 声明。删除这一行：

src: url('../fonts/calgary.eot');

看看这是否有帮助。如果 Firefox 只读取此，首先，src 定义，它将尝试加载它不支持的 EOT 字体...

【讨论】：

【解决方案2】：

我总是使用以下结构，并且在 firefox（或其他任何东西）中没有问题

@font-face {
    font-family: 'Calgary';
    src: url('/fonts/calgary.eot');
    src: url('/fonts/calgary.eot?#iefix') format('embedded-opentype'),
         url('/fonts/calgary.woff') format('woff'),
         url('/fonts/calgary.ttf') format('truetype'),
         url('/fonts/calgary.svg#calgary') format('svg');
    font-weight: normal;
    font-style: normal;
}

【讨论】：