web-dev-qa-db-ja.com

CSS @ font-face外部ドメインからの絶対URL：firefoxでフォントがロードされない

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;
}
cssfont-face
21
j-man86

Firefoxで@ domain-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>
34
Victor Ribeiro da Silva Eloy

これは既知の制限であり、実際には他のサーバーへの悪用を防ぐためのセキュリティ対策です。

フォントがホストされているサーバーをサーバーレベルで制御できる場合は、Apacheを微調整してこれらの種類の接続を許可できます。それに関する詳細： http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

ただし、これを行うと、他のすべてのサイトがそれらのサイトでそれらのフォントを使用し、帯域幅を使用できるようになることに注意してください。

7
Ben Dyer

リモートサーバーにアクセスできる場合は、ローカルスクリプトを追加して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のすべてのページでフォントを使用できますが、他のサーバーのページでは使用できません。

6
FrancescoMM
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>

これは私が問題を解決するのに役立ちました。

0
user5217969

次の行を.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

0
Arvind Bhardwaj