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指定字体，则需要使用访问控制标头，特别是将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>

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 if为安全起见，阻止在字体文件夹之外访问。

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

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

这有助于我解决这个问题。

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

5 个答案: