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

【问题标题】：@font-face: Firefox requires user to allow download of font file@font-face: Firefox 要求用户允许下载字体文件
【发布时间】：2014-02-06 01:36:35
【问题描述】：

在 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）中，所请求的字体似乎需要授权才能下载字体，所以它永远不会下载它，而且我看到的是默认衬线，这会改变外观戏剧性的。

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

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

坦率地说，不确定为什么这不起作用。我听说 Firefox 通常会下载列表中的最后一个字体，我将其作为 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 属性是为了改善窗口中的文本渲染。]

最后，我认为问题出在访问控制标头上，但是由于没有可编辑的 .htaccess，如何将这些附加到字体代码中？

提前致谢！

【问题讨论】：

你能澄清一下到底是什么问题吗？哪个 URL 请求哪种授权失败？
字体应该在后台自动下载，以使其作为页面的一部分呈现。出现这个问题是因为 Firefox 似乎希望用户“允许”下载字体，但没有允许他们下载的对话框，所以它完全忽略它并替换为默认字体。将任何字体 URL 粘贴到 Firefox 地址栏中会显示常规文件下载对话框。
究竟是什么让你觉得 Firefox 想要这个？您收到了哪些消息或对话？
就是这样，我没有得到任何对话框，但是当我使用直接下载 URL 时，它们会提示允许下载。如果是其他问题，请提供您的专业知识，因为我迷路了 - 我只是假设是这样。
提示如何？使用普通的基本身份验证对话框？

标签： firefox font-face

【解决方案1】：

Firefox 不允许您从不同的域加载字体资源。您必须通过 dropbox.com 服务器上的 .htaccess 文件明确允许这样做。

这是一个sn-p：

<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

【讨论】：

这看起来很像答案，但是如何让 firefox 查找位于 link 的保管箱上的 .htaccess 呢？也不确定文件中还需要什么。抱歉，我似乎比我意识到的更新手。

【解决方案2】：

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

【讨论】：