Question

Hello 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伪选择器。再次，铬很好，但没有在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妨碍了进步。

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;
}

字体渲染和：之前在firefox中

1 个答案: