从外部域CSS @字体面绝对URL：字体在Firefox不加载(CSS @font-face abs

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上托管不同域的字体如果要指定使用绝对URL为@字体面的字体，或托管在不同领域的字体使用@字体面，它需要投放与访问控制接头，具体地，访问控制允许来源头设置为“*”或允许请求的字体的域。 这也适用于寄存在不同的子域的字体。 如果您使用的是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: 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>

这帮助我解决这个问题。

文章来源: CSS @font-face absolute URL from external domain: fonts not loading in firefox