为什么WOFF字体在Firefox中挂起

我一直在尝试使用一种名为Oswald的WOFF字体并将其加载到本地，因为对Google Web字体的外部请求有时充其量是缓慢的。 它可以在Chrome和IE9中使用，但不能在Firefox中使用！ 调查开始了……

还有一些正在流产。

为什么要使用WOFF？

使用WOFF有三个主要好处：

• 字体数据是压缩的，因此与使用等效的未压缩TrueType或OpenType文件的站点相比，使用WOFF的站点将使用较少的带宽并且加载速度更快。
• 许多不愿许可其TrueType或OpenType格式字体在网络上使用的字体供应商将许可WOFF格式字体。 这样可以提高网站设计者字体的可用性。
• 专有和免费软件浏览器供应商都喜欢WOFF格式，因此它有可能成为Web上一种真正通用的，可互操作的字体格式，这与其他当前的字体格式不同。

如何解决这个问题！

Mozilla在关于Web开放字体格式（WOFF）的页面上显示“本文需要技术审查。” 我可能不得不同意这一点。

该页面说Firefox 3.6+支持全部带有@ font-face的WOFF类型。

我读到Apache需要通过定义专用的MIME类型来支持woff 类型 。 .htaccess中还包含用于到期和压缩的部分。

AddType application/x-font-woff .woff

这没有帮助。

现在跳转到真棒网站caniuse.com，它分析了我可以使用WOFF吗？ 。 这使我在Mozilla hacks博客上找到了另一篇有关WOFF的文章 。 两者都说支持。 这篇文章建议也为那些不支持WOFF的浏览器指定TTF字体类型。

@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.woff) format("woff"),
       url(fonts/GenR102.ttf) format("truetype");
}

[blockquote class =” left”] WOFF格式的字体被压缩但未加密，那些寻求严格调节和控制字体使用机制的人不应将其视为“安全”格式。[/ blockquote]

使用JavaScript加载字体似乎可以工作，但仍然会挂起对本地字体（在CSS中指定）的请求。

可以使用PHP嗅探来特定于Firefox的JavaScript加载，但无法提供与带有@ font-face的CSS相同的解决方案。

因此，现在我尝试添加一些.htaccess apache MIME类型。

 #add support for FONT TYPES
AddType application/x-font-woff .woff
AddType application/vnd.ms-fontobject .eot

 
  
   
   
   
  Header set cache-control: public
  ExpiresActive on
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
 
  
    

答对了！ 似乎已经为3工作！ 但是，仍然有6个WOFF文件挂起的请求。 现在，我认为它们可能是同一字体的不同版本，例如粗体，细体等。

绝对没有文件！

这是我的CSS...。 Mozilla发生了什么事？ 有任何想法吗？

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('Oswald Bold'), local('Oswald-Bold'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local('Oswald Light'), local('Oswald-Light'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}

/* custom font */
h1 {
   font-family: 'Oswald', sans-serif; 
}

From: https://www.sitepoint.com/woff-fonts-hanging-firefox/