请在发表评论之前阅读所有内容。
我目前正在开发一个托管在 Amazon Web Services (AWS) 上的大型网站。这使我们能够在网站可能承受较大流量负载的情况下使用可扩展性功能。
最初,我们首先将网站的代码分离为 HTML/PHP/Java 等的混合体,并在单独的服务器上拥有静态资产。当我第一次尝试在此设置中使用 font-face 时,我发现 Firefox 和 IE 无法加载字体,并且很快发现这是一个跨域问题。对此有多种解决方案,其中包括修改标头以允许访问字体文件。然而,我们使用的存储系统不允许这种类型的标头修改。
为了看看我是否能让这些字体在所有浏览器上工作,我将它们以及调用它们的 CSS 文件移动到与网站相同的域。然而,它们似乎仍然无法在 Firefox 或 IE 中加载。如果我复制代码并在文档中本地运行它,那么在所有浏览器中一切似乎都很好(因此文件不会损坏)。 Firefox 确实找到了这些文件,因为我可以看到它们是通过 FireBug 加载的。
我已经检查了所有 URL,以确保它们正确并解析它们应该解析的位置。
这是我在笑脸黑客中使用的字体 CSS:
@font-face {
font-family : "AllerRegular";
src : url('aller_rg-webfont.eot');
src : local('☺'),
url('aller_rg-webfont.woff') format('woff'),
url('aller_rg-webfont.ttf') format('truetype'),
url('aller_rg-webfont.svg#webfontooYDBZYS') format('svg');
font-weight : normal;
font-style : normal;
}
CSS 文件与字体位于同一目录中。
我还在 .htaccess 文件中设置了 MIME 类型,该文件与字体位于同一文件夹中。
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
如果您有任何想法请提出。
我已经在网上搜索了几天,但所有解决方案都让我失败。