26

http://fwy.pagodabox.com

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

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

5 回答 5

37

您不能在 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>
于 2012-07-23T16:17:24.073 回答
7

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

如果您对托管字体的服务器具有服务器级控制权，则可以调整 Apache 以允许此类连接。更多信息：http ://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

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

于 2012-07-23T16:16:29.783 回答
7

如果您有权访问远程服务器，则可以添加一个本地脚本来设置正确的标题，例如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 上的所有页面都可以使用这些字体，而其他服务器上的页面可能不会。

于 2014-06-12T10:34:15.937 回答
0

您可以通过在 .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

于 2015-01-03T06:27:12.957 回答
0 
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>

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

于 2015-08-12T06:45:52.940 回答