CSS @字體面絕對URL：字體不會在Firefox加載

http://fwy.pagodabox.com CSS @字體面絕對URL：字體不會在Firefox加載

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

我有我的字體和CSS託管的pagodabox.com服務器上，並正在開發店裏部分shopify。我想使用pagodabox託管網站的相同樣式表作爲shopify網站。但我的字體不在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; 
}

來源

2012-07-23 j-man86

不能在Firefox中使用@ font-face，其字體位於不同的域上如果要使用絕對URL或託管在其他域上的字體指定@ font-face的字體，它需要與訪問控制標題一起提供，特別是設置爲'*'的訪問控制 - 允許 - 原始標題或允許請求字體的域。這也適用於託管在不同子域上的字體。如果您使用的是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-23 16:17:24

超級。謝謝！ – 2012-07-23 17:19:30

如果您想要在nginx上實現相同的解決方案，請按照此說明操作：http://serverfault.com/questions/162429/how-do-i-add-access-control-allow-origin-in-nginx – 2013-02-05 16:46:02

「您不能在Firefox中使用@ font-face，而託管在其他域中的字體「。爲什麼Google字體提供的字體在Firefox下工作？這是否意味着除了重新配置服務器之外還有其他工作？ – artfulrobot 2013-12-23 12:57:21

這是一個已知的限制，實際上是防止濫用給其他服務器的安全措施。

如果您擁有託管服務器級別的服務器級別的服務器控制權，您可以調整Apache以允許這些類型的連接。更多信息：http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

但知道如果你這樣做，這將允許所有其他網站在他們的網站上使用這些字體並使用你的帶寬。

來源

2012-07-23 16:16:29

並非所有其他網站。不必要。不僅有Access-Control-Allow-Origin：*，還可以訪問控制 - 允許 - 來源：myothersite.com – FrancescoMM 2015-07-24 09:52:15

，你可以添加本地腳本設置正確的標題，如：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-12 10:34:15 FrancescoMM

這正是我所需要的！非常感謝！ – 2014-10-20 19:42:39

您可以通過將以下行添加到您的子域來允許從子域加載資源。從子域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-03 06:27:12

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-12 06:45:52 user5217969

CSS @字體面絕對URL：字體不會在Firefox加載

回答

相關問題