小编典典

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

css

我将字体和CSS托管在pagodabox.com服务器上,并在shopify上开发商店部分。我想使用来自pagodabox托管网站的相同样式表作为shopify网站。但是我的字体没有加载到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;
}

阅读 453

收藏
2020-05-16

共1个答案

小编典典

您不能在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>
2020-05-16