@ font-face：Firefox要求用户允许下载字体文件 [英] @font-face: Firefox requires user to allow download of font file

问题描述

指定@ font-face如下：

  @ font-face {font-family：'Meta'; 
 src：url（'https://www.sugarsync.com/pf/D7160824_3237110_68577?directDownload=true'）格式（'embedded-opentype'），
 url（'https：// www。格式（'truetype'），
 url（'https://www.sugarsync.com/pf/D7160824_3237110_68573?directDownload=true'）格式（'woff '），
 url（'https://www.sugarsync.com/pf/D7160824_3237110_68579?di​​rectDownload=true#Meta'）format（'svg'）; 
 font-weight：normal; 
 text-shadow：0 1px 0 rgba（255,255,255,0.01）; 
 
 
 
 $ b 
适用于Chrome和Safari，但不适用于Firefox。应该在IE浏览器工作，因为它是在顶部的EOT和URL包含一个'？'使IE浏览器认为交替是一个查询字符串，虽然我没有办法测试这个，因为我在Mac。
 
 
 
问题是，在Firefox（10.0.2，Mac）中，被请求的字体似乎需要授权来下载字体，所以它永远不会下载它，并且我以默认serif ，它改变了外观戏剧性。
 
 
 
样式也是像CSS一样在CSS中声明，具有正确的层次结构，例如：
 
 
  body {
 font-family：Meta，Helvetica，Arial，sans-serif; 
} 
  
不知道为什么这不起作用，坦率地说。我听说Firefox说通常会下载列表中的最后一个字体，我将SVG作为阅读顺序最后的手段文件类型，以及在URL末尾使用#Fontname指定的字体名称。这可能是问题吗？如果是这种情况，我可以选择不指定SVG字体名称吗？  b 
 $ b 我也有这个不行的Firefox在我的另一个网站上也托管了货物。 
 
 
这一点有点不同，似乎排除了这个问题的显而易见的问题：
 
在那里，代码使用旧的防弹方法：
 
 
  @ font-face {font-family：'Egyptienne'; 
 src url（'http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.eot'）format（'embedded-opentype' ）; 
 src：local（'☺'），
 url（'http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman- webfont.ttf'）格式（'truetype'），
 url（'http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont .woff'）格式（'woff'），
 url（'http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont。 svg'）格式（'svg'）; 
 font-weight：normal; 
 text-shadow：0 1px 0 rgba（255,255,255,0.01）; 
 
 
 
 $ b $ p 
 $ b 
但是，字体永远不会加载，先生默认。
 
 
我认为差异可能是在其他情况下的问题，但似乎排除这一点：$ b​​ 
 $ b 
 
 
 HTTP vs HTTPS（我最初认为这是HTTPS的S背后的问题）
 
 
从未指定SVG名称，甚至没有一个查询字符串混淆它
 
 
 
 
 
 [也可能不相关，但在别人问之前，文本阴影属性是每次都改善文本在Windows中的渲染。] 
 
 
 
最后，我假设问题在于Access Control Headers，但是如何将这些附加到字体代码中，没有.htaccess可以编辑？
 
 
 
在此先感谢！ 
解决方案
 Firefox不允许您从不同的域加载字体资源。您必须通过dropbox.com服务器上的.htaccess文件明确地允许这样做。
 
 
 
以下是一个片段：
 < FilesMatch\。（ttf | otf | woff）$> 
< IfModule mod_headers.c> 
 Header set Access-Control-Allow-Origin*
  
< / FilesMatch> 
  
甚至更好，因为上面的代码将允许任何人泄露：
 
 
 < FilesMatch\。（eot | otf | woff | ttf）$> 
 SetEnvIf Origin»
^ http（s）？：//（。+ \。）？（domain1\.org | domain\.com）$origin_is = $ 0 
 Header set Access-Control-Allow-Origin％{origin_is} e env = origin_is 
< / FilesMatch> 
  
更多信息可以在这里找到： http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems   p> 
Running a site on the CargoCollective platform.

Specifying @font-face as follows:
@font-face {    font-family: 'Meta';
                src:    url('https://www.sugarsync.com/pf/D7160824_3237110_68577?directDownload=true') format('embedded-opentype'),
                        url('https://www.sugarsync.com/pf/D7160824_3237110_68571?directDownload=true') format('truetype'),
                        url('https://www.sugarsync.com/pf/D7160824_3237110_68573?directDownload=true') format('woff'),
                        url('https://www.sugarsync.com/pf/D7160824_3237110_68579?directDownload=true#Meta') format('svg');
                font-weight: normal;
                text-shadow: 0 1px 0 rgba(255,255,255,0.01);
                }
Works in Chrome and Safari, but not in Firefox. Should work in IE since it's got EOT at the top and the URL contains a '?' making IE think the alternates are a query string, though I have no way of testing this as I am on mac.

Problem is that in Firefox (10.0.2, Mac), the font being requested seems to need authorisation to download the font, so it never does download it, and I'm presented with the  default serif, which alters the appearance dramatically.

Styling is declared also in the CSS, as usual, with correct hierarchy structure, for example:
body { 
       font-family: Meta, Helvetica, Arial, sans-serif; 
      }
Not sure why this isn't working, frankly. I've heard it said that Firefox usually downloads the last font in the list, which I have as the SVG as a reading-order 'last resort' filetype, and the font name specified using #Fontname at the end of the URL. Could this be the problem? Can I elect not to specify the SVG Font Name, if this is the case? 

I also have this not working in Firefox on another of my websites also hosted on Cargo.

Situation there differs a little, and seems to rule out the obvious issues with this one:

There, the code uses the old 'bulletproof' method:
@font-face {    font-family: 'Egyptienne';
                src url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.eot') format('embedded-opentype');
                src: local('☺'),
                url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.ttf') format('truetype'),
                url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.woff') format('woff'),
                url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.svg') format('svg');
                font-weight: normal;
                text-shadow: 0 1px 0 rgba(255,255,255,0.01);
                }
But again, the font never loads, and I'm left with ol' Mr. Default.

Differences that I thought may be the issue in the other situation but which seem to be ruled out by this one:


HTTP vs HTTPS (I initially thought it was an issue with being behind the S of HTTPS)
SVG Name is never specified, and there's not even a query string to confuse it


[Also, probably irrelevant but before someone asks, the text-shadow property is to minutely improve text rendering in windows.]

Finally, I assume the problem is with Access Control Headers, but how does one append these to font-face code, since there is no .htaccess available to edit?

Thanks in advance!
解决方案
Firefox does not allow you to load font resources from a different domain. You would have to explicitly allow this via an .htaccess file on the dropbox.com server.

Here's a snippet:
<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Or even better, since the above code will allow anyone to leach:
<FilesMatch "\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin »
    "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>
More information can be found here: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

                        
这篇关于@ font-face：Firefox要求用户允许下载字体文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！