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

http://fwy.pagodabox.com

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

我有我的字体和css托pipe在pagodabox.com服务器上，并正在开发shopify的商店部分。 我想使用pagodabox托pipe网站的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; } 

Answer 1

您不能在Firefox中使用带有托pipe在其他域中的字体的@ font-face如果要使用绝对URL或托pipe在其他域上的字体指定@ font-face的字体，则需要提供使用访问控制标题，特别是Access-Control-Allow-Origin标题设置为“*”或允许请求字体的域。 这也适用于托pipe在不同子域上的字体。 如果您使用的是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> 

Answer 2

这是一个已知的限制，实际上是防止滥用其他服务器的安全措施。

如果你有对服务器的服务器级别的控制，你可以调整Apache以允许这些连接。 更多信息，请访问： http : //www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

但要知道，如果你这样做，这将允许所有其他网站在他们的网站上使用这些字体，并使用您的带宽。

Answer 3

如果你有权访问远程服务器，你可以添加一个本地脚本来设置正确的头文件，比如header('Access-Control-Allow-Origin: *'); 然后转储字体文件。 例如，在PHP中，像这样：

（文件fnt.php在字体的相同文件夹中）

 <?php define('FONT_FOLDER',''); $MIMES=array( '.eot'=>'application/vnd.ms-fontobject', '.ttf'=>'font/ttf', '.otf'=>'font/otf', '.woff'=>'font/x-woff', '.svg'=>'image/svg+xml', ); $IKnowMime=MimeByExtension(GetExt($s)); $f=preg_replace('/[^a-zA-Z.0-9-_]/','',$_REQUEST['f']); /* header("Cache-Control: private, max-age=10800, pre-check=10800"); header("Pragma: private"); header("Expires: " . date(DATE_RFC822,strtotime(" 2 day"))); */ header('Content-type: '.$IKnowMime ); header("Content-Transfer-Encoding: binary"); header('Content-Length: '.filesize(FONT_FOLDER.$f)); header('Content-Disposition: attachment; filename="'.$f.'";'); header('Access-Control-Allow-Origin: *'); readfile(FONT_FOLDER.$f); function GetExt($File) { $File=explode('.',$File); if(count($File)==1) return ''; return '.'.$File[count($File)-1]; } function MimeByExtension($ex) { global $MIMES; $ex=strtolower($ex); if(isset($MIMES[$ex])) return $MIMES[$ex]; else return FALSE; } ?> 

然后你可以使用这样的字体：

 <style type="text/css"> @font-face { font-family: 'default-font'; src: url('http://www.website.com/fonts/ultra/fnt.php?f=arial.eot'); src: url('http://www.website.com/fonts/ultra/fnt.php?f=arial.eot#iefix') format('embedded-opentype'), url('http://www.website.com/fonts/ultra/fnt.php?f=arial.woff') format('woff'), url('http://www.website.com/fonts/ultra/fnt.php?f=arial.ttf') format('truetype'), url('http://www.website.com/fonts/ultra/fnt.php?f=arial.svg#arial') format('svg'); } </style> 

指定php文件而不是字体文件，并将字体文件作为parameter passing?f=fontfile.woff 。 如果你想保持FONT_FOLDER参数指向正确的文件夹。 preg_replace如果为了安全性，防止访问字体文件夹之外。

您还可以支持某种forms的身份validation，以确保只使用这些字体。

您也可以考虑使用除*之外的一些Access-Control-Allow-Origin来准确指定谁可以访问您的字体文件。

 Access-Control-Allow-Origin: http://www.fromthisserverican.com 

将允许从服务器www.fromthisserverican.com进行访问，这意味着www.fromthisserverican.com上的所有页面都可以使用这些字体，而其他服务器上的页面可能不会。

Answer 4

您可以通过将以下行添加到.htaccess文件来允许从子域加载资源

从子域加载资源：

 # Allow font, js and css to be loaded from subdomain SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0 <IfModule mod_headers.c> <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$"> Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN </FilesMatch> </IfModule> 

从所有其他域加载资源：

 # Allow font, js, and css to be loaded from subdomain <IfModule mod_headers.c> <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule> 

资料来源： http ： //www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

Answer 5

 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> 

这帮助我解决了这个问题。