@ font-face不能在firefox中工作

时间:2012-05-17 16:03:01

标签: css firefox css3

使用这个@ 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;
}

2 个答案:

答案 0 :(得分:1)

你有一个重复的src声明。删除这一行:

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

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

答案 1 :(得分:0)

我总是使用以下结构并且在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;
}