CSS @ font-face URL tuyệt đối từ miền bên ngoài: phông chữ không tải trong firefox

Question

http://fwy.pagodabox.com

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

Tôi có phông chữ và css của tôi được lưu trữ trên một máy chủ pagodabox.com, và đang phát triển phần lưu trữ trên shopify. Tôi muốn sử dụng cùng một biểu định kiểu từ trang web được lưu trữ trên trang web cho trang web shopify. Nhưng phông chữ của tôi không tải trong firefox, phiên bản 13.0.1

Có vấn đề gì với FF hoặc với cú pháp của tôi không? Cảm ơn!!!

@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

Bạn không thể sử dụng @ phông chữ trong Firefox với phông chữ được lưu trữ trên miền khác Nếu bạn muốn chỉ định phông chữ cho @ phông mặt bằng URL tuyệt đối hoặc phông chữ được lưu trữ trên miền khác, nó cần phải được phục vụ với Header Access Control, đặc biệt là tiêu đề Access-Control-Allow-Origin được đặt thành '*' hoặc các miền được phép yêu cầu phông chữ. Điều này cũng áp dụng cho phông chữ được lưu trữ trên một tên miền phụ khác. Nếu bạn đang sử dụng Apache bạn có thể thử đặt này trong .htaccess của bạn và khởi động lại máy chủ

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

Đây là giới hạn đã biết và thực sự là biện pháp bảo mật để ngăn chặn lạm dụng với các máy chủ khác.

Nếu bạn có quyền kiểm soát cấp máy chủ của máy chủ, phông chữ được lưu trữ trên đó, bạn có thể tinh chỉnh Apache để cho phép các loại kết nối này. Thông tin thêm về điều đó: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

Nhưng biết rằng nếu bạn làm điều này, điều này sẽ cho phép tất cả các trang web khác sử dụng các phông chữ đó trên trang web của họ và sử dụng băng thông của bạn.

Answer 3

Nếu bạn có quyền truy cập vào máy chủ từ xa, bạn có thể thêm một kịch bản địa phương để thiết lập các tiêu đề chính xác, giống như header('Access-Control-Allow-Origin: *'); và sau đó đổ tệp phông chữ. Ví dụ, trong PHP, như thế này:

(file fnt.php trong cùng một thư mục của các phông chữ)

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

?> 

Sau đó, bạn có thể sử dụng các phông chữ như thế này:

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

chỉ định tệp php thay vì tệp phông chữ và chuyển tệp phông chữ làm đối số ?f=fontfile.woff. Nếu bạn muốn giữ tham số FONT_FOLDER trỏ đến đúng thư mục. Các preg_replace nếu cho an ninh, ngăn chặn truy cập bên ngoài của thư mục phông chữ.

Bạn cũng có thể hỗ trợ một số hình thức xác thực để đảm bảo chỉ bạn đang sử dụng các phông chữ đó.

Bạn cũng có thể xem xét sử dụng một số Access-Control-Allow-Origin khác với '*' để chỉ định chính xác ai có thể truy cập tệp phông chữ của bạn.

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

sẽ cho phép truy cập từ máy chủ www.fromthisserverican.com, có nghĩa là tất cả các trang trên www.fromthisserverican.com có ​​thể sử dụng phông chữ, trong khi các trang trên máy chủ khác có thể không.

Answer 4

Bạn có thể cho phép tải tài nguyên từ miền phụ bằng cách thêm dòng sau vào của bạn.file .htaccess

nguồn Load từ sub-domain:

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

nguồn Load từ tất cả các lĩnh vực khác:

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

Nguồn: 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> 

này đã giúp tôi để sửa chữa vấn đề.