更新:看起来我陷入了一个事实上不是问题原因的相关性。问题实际上是如何部署CSS文件的一个无关的问题。有关详细信息,请参阅下面的答案。
我的@ font-face在WebKit(Safari和Chrome)和Opera中运行良好,但在Firefox 3.5或IE 8中运行良好。
根据Google及其他人的建议,我从主网站的单独域提供所有静态资源,包括CSS。 如果我提供来自同一个域的所有内容,它可以在所有浏览器中正常工作(注意:这意味着有关CSS语法的答案毫无用处。我已经完成了所有这些并且工作得很好。这只是关于跨域问题)。
如果我从静态资源域提供CSS和字体文件,并让静态资产服务器设置相应的access-control header(Access-Control-Allow-Origin),应该工作,它可以在除FF 3.5和IE之外的任何地方使用。
我需要做些什么来完成这项工作?
答案 0 :(得分:2)
迄今为止我发现的最佳答案,希望它可以帮助其他人:
据我所知,关键问题是CSS文件(不是字体文件)是否跨域加载。如果我使用静态资源域中的@ font-face声明加载CSS文件,我所做的任何事情都不会使字体在FF或IE中工作,无论访问控制标头如何。如果我从与页面相同的域加载CSS文件,或者我只是将我的@ font-face声明移动到页眉中的样式块,那么它适用于所有浏览器(我甚至可以跨域加载字体文件)只要我设置了访问控制头。)
总结一下:无论如何,AFAICT,FF 3.5和IE 8都将拒绝在跨域加载的CSS文件中使用@ font-face声明。
如果有人知道的话,我很乐意纠正这个问题,并指出我可能做错了什么。
确实,我错了。事实证明,我们用于部署从专用域提供的资产的CSS压缩器用“@media screen {...}”包装整个CSS块。我仔细比较了@ font-face规则,以确保压缩器没有弄乱它们,但从未检查CSS文件的开头和结尾以捕获包装。当我切换到服务同域时,没有发生这种包装。
事实证明,IE和Firefox并不尊重包含在@media中的@ font-face声明:Safari,Chrome和Opera。
叹息。
答案 1 :(得分:-1)
我建议查看this IEBlog post,它描述了如何在IE上进行字体嵌入。不,这与CSS3方式不匹配,不,你没有任何其他方法可以在IE中使用@ font-face。
值得注意的是,微软向W3C提交了EOT方法,以使其标准化,W3C在此行动中有expressed interest。
答案 2 :(得分:-2)
此链接对我有很大帮助:http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master
不幸的是,我对我想要尝试的大多数字体的文本质量感到非常失望。我无法确定某些字体是否不具有抗锯齿性,但结果并不令人满意,我仍然使用图像替换。