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 ヘッダー、具体的には「*」に設定された 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 を使用して、フォント フォルダー外からのアクセスを防止します。

また、何らかの形式の認証をサポートして、それらのフォントを自分だけが使用していることを確認することもできます。

'*' 以外の Access-Control-Allow-Origin を使用して、フォント ファイルにアクセスできるユーザーを正確に指定することも検討してください。

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

サーバー www.fromthisserverican.com からのアクセスを許可します。つまり、www.fromthisserverican.com のすべてのページでフォントを使用できますが、他のサーバーのページでは使用できない場合があります。

于 2014-06-12T10:34:15.937 に答える