web-gelistirme-sc.com

CSS @ font-face harici alan adından mutlak URL: fontlar firefox’a yüklenmiyor

http://fwy.pagodabox.com

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

Bir pagodabox.com sunucusunda fontlarım ve css'im var ve shopify'daki mağaza bölümünü geliştiriyorum. Shopify sitesi için pagodabox tarafından barındırılan siteden aynı stil sayfasını kullanmak istiyorum. Ancak fontlarım firefox'a yüklenmiyor, sürüm 13.0.1

FF ile veya sözdizimimle ilgili bir sorun mu var? Teşekkürler!!!

@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;
}
20
j-man86

Firefox'ta @ font-face'i farklı bir etki alanında barındırılan bir fontla birlikte kullanamazsınız. • Mutlak bir URL kullanarak @ font-face için bir font belirtmek istiyorsanız veya farklı bir etki alanında barındırılan bir font belirtmek istiyorsanız, gerekenler Erişim Denetimi Başlıkları ile, özellikle '*' olarak ayarlanan Erişim Denetimi-İzin Verme Başlığı başlığı veya yazı tipini isteme izin verilen alanlar ile birlikte sunulacak. Bu, farklı bir alt alanda barındırılan yazı tipleri için de geçerlidir. Apache kullanıyorsanız bunu .htaccess'inize koymayı deneyebilir ve sunucuyu yeniden başlatabilirsiniz.

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>

Bu bilinen bir sınırlamadır ve aslında diğer sunuculara kötüye kullanımı önlemek için bir güvenlik önlemidir.

Yazı tiplerinin barındırıldığı sunucunun sunucu düzeyinde denetimine sahipseniz, bu tür bağlantılara izin vermek için Apache'yi Tweak yapabilirsiniz. Bu konuda daha fazla bilgi: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

Ancak, bunu yaparsanız, bunun diğer tüm sitelerin sitelerinde bu fontları kullanmasına ve bant genişliğinizi kullanmasına izin vereceğini bilin.

7
Ben Dyer

Uzak sunucuya erişiminiz varsa, header('Access-Control-Allow-Origin: *'); gibi doğru başlıkları ayarlamak için yerel bir komut dosyası ekleyebilir ve ardından font dosyasını atabilirsiniz. Örneğin, PHP'de şöyle:

(dosya fnt.php yazı tipinin aynı klasöründe)

<?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;
    }

?>

Sonra bu gibi yazı tiplerini kullanabilirsiniz:

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

yazı tipi dosyası yerine php dosyasının belirtilmesi ve yazı tipi dosyasının ?f=fontfile.woff argümanı olarak iletilmesi. FONT_FOLDER parametresini doğru klasöre yönlendirmek istiyorsanız. Preg_replace, güvenlik için font klasörünün dışında erişimi engelliyorsa.

Yalnızca bu yazı tiplerini kullandığınızdan emin olmak için bir tür kimlik doğrulamayı da destekleyebilirsiniz.

Yazı tipi dosyalarınıza kimlerin erişebileceğini tam olarak belirtmek için '*' dışında bir Access-Control-Allow-Origin kullanmayı da düşünebilirsiniz.

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

www.fromthisserverican.com sunucusundan erişime izin verecek, yani www.fromthisserverican.com adresindeki tüm sayfaların yazı tiplerini kullanabileceği anlamına gelir;.

5
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>

Bu, sorunu çözmeme yardımcı oldu. 

0
user5217969

.Htaccess dosyanıza aşağıdaki satırı ekleyerek kaynakların alt etki alanından yüklenmesine izin verebilirsiniz.

Kaynakları alt etki alanından yükleyin:

# 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>

Diğer tüm etki alanlarından kaynakları yükleyin:

# 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>

Kaynak: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

0
Arvind Bhardwaj