Firefox 中的字体渲染和 :before

Question

你好 stackoverflowers，

我建立了一个在 Chrome 和 FF 中看起来很棒的网站（但仅在本地服务器中）。上传后，chrome 做得很好，看起来很棒。 FF 不呈现@font-face 字体..无法弄清楚原因。使用 Foundation 3。

SASS：

@font-face {
font-family: 'oswald';
src: url('/stylesheets/font/oswald/oswald-webfont.eot');
src: url('/stylesheets/font/oswald/oswald-webfont.eot?#iefix') format('embedded-opentype'),
     url('/stylesheets/font/oswald/oswald-webfont.woff') format('woff'),
     url('/stylesheets/font/oswald/oswald-webfont.ttf') format('truetype'),
     url('/stylesheets/font/oswald/oswald-webfont.svg#oswaldregular') format('svg');
font-weight: lighter;
font-style: lighter;
}

$headerFontFamily: "oswald", Helvetica, Arial, sans-serif;

在页脚中，有一些社交链接。这些具有使用 a:before 伪选择器的图标。同样，在 chrome 中很好，但在 Firefox 中没有。我已经逐字检查了代码，看不到任何拼写错误....但是已经晚了。这个很奇怪，因为其中一个链接很好，而不是前两个：

css:

li:nth-of-type(1) a:before {        content: url('../images/watch-trailer.png');            }
        li:nth-of-type(2) a:before {        content: url('../images/rating.png');                   }
        li:nth-of-type(3) a:before {        content: url('../images/book-seats.png');               }
        li:nth-of-type(1) a:hover:before {  content: url('../images/watch-trailer-active.png');     }
        li:nth-of-type(2) a:hover:before {  content: url('../images/rating-active.png');            }
        li:nth-of-type(3) a:hover:before {  content: url('../images/book-seats-active.png');    

}

http://schwack.madmantis.co.uk/

请帮助解决这两个问题。
附带说明一下，该页面在 ie 中确实存在一些问题（例如缺少滑块内容，电影拇指覆盖不透明，可能还有其他一些问题）我并不急于解决这些问题，但如果有人碰巧会很好对他们进行修复。愚蠢的 IE 阻碍了进步。

Answer 1

您的服务器似乎配置错​​误，无法处理字体文件（woff、svg、eot、ttf）。

服务器返回一个500 Internal Server Error。

http://schwack.madmantis.co.uk/stylesheets/font/Oswald/oswald-webfont.woff http://schwack.madmantis.co.uk/stylesheets/font/Oswald/oswald-webfont.ttf

更新

似乎字体在（全小写）http://schwack.madmantis.co.uk/stylesheets/font/oswald/oswald-webfont.{format}下可用

使用以下字体定义更改您的styles.css：

@font-face {
  font-family: 'oswald';
  src: url("/stylesheets/font/oswald/oswald-webfont.eot");
  src: url("/stylesheets/font/oswald/oswald-webfont.eot?#iefix") format("embedded-opentype"), url("/stylesheets/font/oswald/oswald-webfont.woff") format("woff"), url("/stylesheets/font/Oswald/oswald-webfont.ttf") format("truetype"), url("/stylesheets/font/Oswald/oswald-webfont.svg#oswaldregular") format("svg");
  font-weight: lighter;
  font-style: lighter;
}