firefox - @font-face 仅在 firefox 中不起作用

标签 firefox css

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

最佳答案

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

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

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

关于firefox - @font-face 仅在 firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10639269/

相关文章:

html - 视频标签在桌面 firefox 中不起作用,但在移动 firefox 中起作用

html - 将鼠标悬停在 SVG 上可更改颜色

javascript - 如果设备在移动设备上,则更改 css

css - 第 2 行和第 3 行的第 N 个子选择器

css - IE10悬停伪类没有背景色不起作用

css - IE/Firefox 中的填充和/或边距与 Chrome 不同

html - Firefox 中的 Textarea 和 div 填充差异

html - Favicons 拒绝在 IE 和 Chrome 中显示

javascript - 在按钮中显示 javascript 数组的内容

javascript - 在终端中使用imacros运行JS