来自外部域的 CSS @font-face 绝对 URL:字体未在 Firefox 中加载

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11616306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:34:51  来源:igfitidea点击:

CSS @font-face absolute URL from external domain: fonts not loading in firefox

cssfont-face

提问by HandiworkNYC.com

http://fwy.pagodabox.com

http://fwy.pagodabox.com

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

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

I have my fonts and css hosted on a pagodabox.com server, and am developing the store section on shopify. I want to use the same stylesheet from the pagodabox hosted site for the shopify site. But my fonts aren't loading in firefox, version 13.0.1

我的字体和 css 托管在 pagodabox.com 服务器上,并且正在开发 shopify 上的商店部分。我想将来自宝塔盒托管站点的相同样式表用于 shopify 站点。但是我的字体没有在 firefox 版本 13.0.1 中加载

Is there an issue with FF or with my syntax? Thanks!!!

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

回答by Victor Ribeiro da Silva Eloy

You can't use @font-face in Firefox with a font hosted on a different domain If you want to specify a font for @font-face using an absolute URL, or a font hosted on a different domain, it needs to be served with Access Control Headers, specifically the Access-Control-Allow-Origin header set to '*' or the domains allowed to request the font. This also applies to fonts hosted on a different sub-domain. If you are using Apache you can try to put this in your .htaccess and restart the server

你不能在 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>

回答by Ben Dyer

This is a known limitation and is actually a security measure to prevent abuse to other servers.

这是一个已知的限制,实际上是一种防止滥用其他服务器的安全措施。

If you have server-level control of the server the fonts are hosted on, you can tweak Apache to allow these kinds of connections. More info on that: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

如果您对托管字体的服务器具有服务器级别的控制权,则可以调整 Apache 以允许这些类型的连接。更多信息:http: //www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

But know that if you do this, this would allow all other sites to use those fonts on their sites and use your bandwidth.

但是要知道,如果您这样做,这将允许所有其他站点在其站点上使用这些字体并使用您的带宽。

回答by FrancescoMM

If you have access to the remote server, you can add a local script to set the correct headers, like header('Access-Control-Allow-Origin: *');and then dump the font file. For example, in PHP, like this:

如果您有权访问远程服务器,则可以添加本地脚本来设置正确的标题,例如header('Access-Control-Allow-Origin: *');然后转储字体文件。例如,在 PHP 中,像这样:

(file fnt.phpin the same folder of the fonts)

(文件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;
    }

?>

Then you can use the fonts like this:

然后你可以使用这样的字体:

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

specifying the php file instead of the font file, and passing the font file as an argument ?f=fontfile.woff. If you want to keep the FONT_FOLDER parameter to point to the correct folder. The preg_replace if for security, preventing access outside of the font folder.

指定 php 文件而不是字体文件,并将字体文件作为参数传递?f=fontfile.woff。如果要保留 FONT_FOLDER 参数以指向正确的文件夹。preg_replace if 是为了安全,防止在字体文件夹之外访问。

You can also support some form of authentication to get sure only you are using those fonts.

您还可以支持某种形式的身份验证,以确保只有您在使用这些字体。

You may also consider using some Access-Control-Allow-Origin other than '*' to specify exactly who can access your font files.

您还可以考虑使用除“*”以外的一些 Access-Control-Allow-Origin 来准确指定谁可以访问您的字体文件。

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

will allow access from server www.fromthisserverican.com, meaning that all pages on www.fromthisserverican.com may use the fonts, while pages on other servers may not.

将允许从服务器 www.fromthisserverican.com 访问,这意味着 www.fromthisserverican.com 上的所有页面都可以使用这些字体,而其他服务器上的页面则不能。

回答by Arvind Bhardwaj

You can allow resources to be loaded from sub domain by adding following line to your .htaccess file

您可以通过在 .htaccess 文件中添加以下行来允许从子域加载资源

Load resources from sub-domain:

从子域加载资源:

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=
# 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>
<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>

Load resources from all other domains:

从所有其他域加载资源:

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>

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

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

回答by user5217969

##代码##

This helped me to fix the issue.

这帮助我解决了这个问题。