请在评论之前阅读所有这些.
我目前正在一个由Amazon Web Services(AWS)上托管的大型网站上工作.这使我们能够在网站可能需要大量流量负载的情况下使用可扩展性功能.
最初我们开始分离网站的代码,混合使用HTML / PHP / Java等,并在单独的服务器上具有静态资产.当我第一次尝试使用这个设置中的font-face时,我发现Firefox和IE不会加载字体,很快就发现这是一个跨域的问题.有各种各样的解决方案,其中包括修改头以允许访问字体文件.但是,我们使用的存储系统不允许这种类型的头修改.
为了看看是否可以让所有浏览器的字体都能正常工作,我把它们和CSS文件一起调用到与该网站相同的域上.但是,它们似乎还没有加载到Firefox或IE中.如果我在我的文档中复制代码并在本地运行,所有浏览器中的所有内容似乎都很好(所以文件不会被破坏). Firefox绝对是找到这些文件,因为我可以看到它们通过FireBug加载.
我已检查所有网址,以确保它们是正确的,并解决他们应该在哪里.
这是我用笑脸黑客使用的font-face 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>