Firefox 和 IE 中的字体未更改答案

【问题标题】：Font is not being changed in Firefox and IEFirefox 和 IE 中的字体未更改
【发布时间】：2014-01-27 12:56:36
【问题描述】：

这是一个网站； http://summerlove.com.au 我们为“SummerLove”这个词使用了特定的字体系列。但是 Firefox 和 IE 浏览器的字体系列没有改变。我用过这个css代码；

font-family: hand_of_sean;
src: url(http://einaco.com/Hand_Of_Sean.ttf);

我的朋友们正在寻求您的快速帮助。

亲切的问候，

穆埃杜拉·K。

【问题讨论】：

我看到你的问题已经得到解答，所以我只想指出你迫切需要压缩你的图像。在 50 兆位 FiOS 连接上，从头到尾下载您的网站需要 31 秒。你有 3.7 兆字节的图像负责其中的大部分，你可以轻松地将其减少约 90%
我会补充一点，你需要捆绑和最小化你的 CSS 和 JavaScript。但更重要的是，服务器真正返回资产的速度很慢。您可能想考虑使用像 AWS Cloudfront 这样的 CDN。没有多少访问者会等待超过 3 到 4 分钟才能下载内容。

标签： css internet-explorer firefox

【解决方案1】：

使用以下网站生成网络字体。

http://www.fontsquirrel.com/tools/webfont-generator

@font-face {
    font-family: 'open_sans';
    src: url('Hand_Of_Sean.eot');
    src: url('Hand_Of_Sean.eot?#iefix') format('embedded-opentype'),
         url('Hand_Of_Sean.woff') format('woff'),
         url('Hand_Of_Sean.ttf') format('truetype'),
  }

这与大多数浏览器兼容。

【讨论】：

【解决方案2】：

Firefox 和 Internet Explorer 具有跨域 @font-face 使用的同域策略。

换句话说，除非托管字体文件的域设置为在请求字体文件时传递正确的标题（见下文），否则浏览器将不会下载/使用您在 CSS 中指定的字体.如果字体托管在同一个域中，则不会出现此问题。

如果您检查为您提到的字体文件发送的响应标头，您会发现它缺少正确的响应标头以允许字体跨域工作。具体来说，它不见了：

访问控制允许来源：*

如果响应中存在该内容，它将起作用。您必须与服务器/网站的所有者交谈才能进行更改。或者，如果您将字体托管在与您的网站相同的域中，则不需要此标头。

与您的具体问题无关，我还建议您阅读本文以更好地理解您应该使用的 CSS：

http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

正如那篇文章所指出的，Font Squirrel 字体生成器非常适合获取正确的 CSS 以及字体的正确格式：

http://www.fontsquirrel.com/tools/webfont-generator

【讨论】：