来自外部域的CSS @ font-face绝对URL:字体未在firefox中加载

前端之家收集整理的这篇文章主要介绍了来自外部域的CSS @ font-face绝对URL:字体未在firefox中加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
http://fwy.pagodabox.com

http://friends-with-you.myshopify.com/

我有我的字体和css托管在pagodaBox.com服务器上,并正在开发店铺部分.我想使用来自pagodaBox托管站点的相同样式表进行购物网站.但是我的字体没有加载到firefox,13.0.1版本

FF或我的语法有问题吗?谢谢!!!

@font-face {
  font-family:'IcoMoon';
  src:url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot');
  src:url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/IcoMoon.svg#IcoMoon') format('svg'),url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/IcoMoon.woff') format('woff'),url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/IcoMoon.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'square';
  src:url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot');
  src:url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot?#iefix') format('embedded-opentype'),url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.woff') format('woff'),url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.ttf') format('truetype'),url('http://fwy.pagodaBox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.svg#SquareSerifLightRegular') format('svg');
  font-weight:normal;
  font-style:normal;
}

解决方法

您不能在Firefox中使用@ font-face,其字体托管在不同的域上
如果要使用绝对URL或不同域中托管的字体为@ font-face指定字体,则需要使用访问控制标题,特别是Access-Control-Allow-Origin标头设置为’* ‘或域允许请求字体.这也适用于托管在不同子域上的字体.如果您使用Apache,您可以尝试将其放在.htaccess中并重新启动服务器
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

猜你在找的CSS相关文章