Firefox中未显示字体[重复]

Question

我正在使用@font-face - 按照建议，我使用.eot、.woff、.ttf 和.svg。它在 Firefox 中正常显示，但在 Firefox 中不使用并回退到 Helvetica / sans-serif。

正常：

火狐：

CSS：

@font-face {
    font-weight: 900;
    font-style: normal;
    font-family: 'Lato';
    src: url('http://static.tumblr.com/cv6ot7o/LREnbhzla/lato-thin.eot');
    src: url('http://static.tumblr.com/cv6ot7o/LREnbhzla/lato-thin.eot?#iefix') format('eot'), url('http://static.tumblr.com/cv6ot7o/iQinbhzmp/lato-thin.woff') format('woff'), url('http://static.tumblr.com/cv6ot7o/Lxynbhzok/lato-thin.ttf') format('truetype'), url('http://static.tumblr.com/cv6ot7o/p2Anbj1jl/lato-thin.svg') format('svg');
}

h1 { 
    font-family: "Lato", "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", sans-serif;
    font-size: 4em;
     }

HTML：

<h1>title</h1>

JSFiddle

我们如何解决这个问题？

我看到一些类似的问题建议使用字体的本地链接，但我不能在这里使用它。

Answer 1

如果你在 Firefox 中查看控制台日志，它有这样的条目：

可下载字体：下载失败（字体系列：“Lato”样式：正常重量：900 拉伸：正常 src 索引：1）：不允许 URI 错误或跨站点访问 来源：http://static.tumblr.com/cv6ot7o/iQinbhzmp/lato-thin.woff

显然该网站希望禁止远程使用他们的字体。

考虑改用Lato at Google fonts。

除此之外，将 Lato Thin 声明为 900 的重量是非常不合逻辑的。它被声明为重量为 100。您应该使用 <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet'> 和 h1 { font-family: Lato; font-weight: 100 }。