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;
}
Vic*_*loy 35
您不能在Firefox中使用@ font-face,并在其他域上托管字体如果要使用绝对URL或托管在其他域上的字体为@ font-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>
这是一个已知的限制,实际上是一种防止滥用到其他服务器的安全措施.
如果您对托管字体的服务器进行服务器级控制,则可以调整Apache以允许这些类型的连接.更多信息:http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html
但要知道,如果你这样做,这将允许所有其他网站在他们的网站上使用这些字体并使用你的带宽.
如果您有权访问远程服务器,则可以添加本地脚本来设置正确的标头,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 if为了安全,阻止访问字体文件夹.
您还可以支持某种形式的身份验证,以确保只使用这些字体.
您还可以考虑使用除"*"之外的某些Access-Control-Allow-Origin来准确指定谁可以访问您的字体文件.
Access-Control-Allow-Origin: http://www.fromthisserverican.com
将允许从服务器www.fromthisserverican.com访问,这意味着www.fromthisserverican.com上的所有页面都可以使用这些字体,而其他服务器上的页面可能不会.