CSS @字体面绝对URL：字体不会在Firefox加载

Question

http://fwy.pagodabox.com

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

我有我的字体和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; 
} 

Answer 1

不能在Firefox中使用@ font-face，其字体位于不同的域上 如果要使用绝对URL或托管在其他域上的字体指定@ font-face的字体，它需要与访问控制标题一起提供，特别是设置为'*'的访问控制 - 允许 - 原始标题或允许请求字体的域。这也适用于托管在不同子域上的字体。如果您使用的是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文件而不是字体文件，并将字体文件作为参数?f=fontfile.woff传递。如果你想保持FONT_FOLDER参数指向正确的文件夹。 preg_replace（如果为了安全），防止访问字体文件夹以外的内容。

您还可以支持某种形式的身份验证，以确保只使用这些字体。

您也可以考虑使用除*之外的一些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> 

帮我修复问题。