Question

在CargoCollective平台上运行网站。

指定@ font-face，如下所示：

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

适用于Chrome和Safari，但不适用于Firefox。应该在IE中工作，因为它在顶部有EOT，URL包含'？'让IE认为替换是一个查询字符串，虽然我没办法测试这个，因为我在Mac上。

问题是在Firefox（10.0.2，Mac）中，所请求的字体似乎需要授权才能下载字体，因此它永远不会下载它，我会看到默认的serif，它改变了外观显着。

样式也像往常一样在CSS中声明，具有正确的层次结构，例如：

body { 
       font-family: Meta, Helvetica, Arial, sans-serif; 
      }

坦率地说，不确定为什么这不起作用。我听说它通常会下载列表中的最后一个字体，我将其作为SVG作为阅读顺序的“最后手段”文件类型，并使用URL末尾的#Fontname指定字体名称。这可能是问题吗？如果是这种情况，我可以选择不指定SVG字体名称吗？

我也在我的另一个也在Cargo上托管的网站上使用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') 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);
                }

但是，再次，字体永远不会加载，我留下了'默认先生。

我认为可能是其他情况下的问题，但这似乎排除了这个差异：

HTTP与HTTPS（我最初认为这是支持HTTPS的S的问题）
永远不会指定SVG名称，甚至连查询字符串都不会混淆

[另外，可能无关紧要但在有人要求之前，text-shadow属性是为了在Windows中精细地改进文本呈现。]

最后，我假设问题出在Access Control Headers上，但是如何将这些附加到font-face代码，因为没有.htaccess可供编辑？

提前致谢！

Answer 1

Firefox不允许您从其他域加载字体资源。您必须通过dropbox.com服务器上的.htaccess文件明确允许此操作。

这是一个片段：

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</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

Answer 2

我们遇到了同样的问题。这是应用程序的错误权限配置。更具体的de / fonts /文件夹。该应用程序限制了对/ fonts /文件夹资源的访问。所以强迫浏览器下载字体...抱歉我的英文。

@ font-face：Firefox要求用户允许下载字体文件

2 个答案: