字体神器在Firefox中无法正常工作

Question

我正在使用Bootstrap，并通过Less添加了Font Awesome，以覆盖Glyphicons。这些图标在Chrome中显示正常，但在Firefox中只能看到方框。

这是我的目录结构：

-- Project
  -- js
  -- css
  -- less
  -- font-awesome
    -- css
    -- font
    -- less

我修改的Project > less > boostrap.less文件中，仅仅是：

@import "sprites.less";

//for this line

@import "../font-awesome/less/font-awesome.less";

如我所说，Chrome没有问题，但是出于某种原因，Firefox只显示方框。

- filistea

---

你正在使用CDN吗？看一下CORS。 - Shankar Cabus

你移除了 @import "sprites.less"; 吗？ - SaurabhLP

是的，就像@ShankarCabus所说的那样。您需要了解如何在与服务器交互时使用CORS。您可能需要设置一些标题，其中包括Access-Control-Allow-Origin，以便为*或任何域。 - jeremywoertink

Answer 1

自定义的网页字体通过CDN（或任何跨域字体请求）在Firefox或Internet Explorer中无法正常工作（按规范正确），尽管它们可以在基于Webkit的浏览器中（不正确地）工作。

您可以通过向页面添加标头来解决此问题。

Apache

<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Nginx

if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

来源: http://davidwalsh.name/cdn-fonts

- Dustin Brownell

---

有关 IIS 的任何解决方案吗？ - Phill Healey

如果文件是从远程CDN加载的，那么如何更改Apache中的头文件呢？我不明白。 （我知道原始发布者正在本地加载，但您似乎在谈论CDN） - Jeff

只需设置以下内容即可更简单、更快速： "<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">"使用您的方法 @Dustin Brownell，它在本地 HTML 项目中无法正常工作。 - Despertaweb

@Blackersoul：除非本地HTML项目通过某种服务器在“http://localhost”下提供服务，否则它将无法工作。 - Gelmir

就像上面的注释所说的那样，它不会显示，除非您的项目通过某种类型的服务器提供服务。一旦我将我的项目部署在本地，图标就会像在Chrome上一样显示。 - JPG

Answer 2

如果你想快速简便地使用Font-awesome，可以尝试使用CDNJS。它是免费的，并由CloudFlare提供支持。CORS已经默认支持。

可以尝试像这样做：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">

- premjg

---

Premjg，这对我非常有效 - 而在 httpd.conf 上摆弄却无法解决我的问题。这确实是最简单的解决方案！ - Max

这应该是最佳答案，因为它适用于许多其他情况（我正在使用jekyll构建我的网站）。 - Heisenberg

在一个安全性很重要的商业项目中（比如银行网站），除非你想让客户端浏览器向第三方网站发送referrer，否则你不希望使用CDN。 - AaA

Answer 3

如果您将字体托管在S3上，您必须在存储桶上启用CORS。通过AWS管理控制台，编辑存储桶的属性，在权限下单击“添加CORS配置”。在我的情况下，如果我保留默认配置，它仍然无法正常工作，因此我将其更改为：

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

- Ruy Diaz

---

这里有一个我找到的好链接，介绍了如何使用CloudFlare与Amazon的S3服务：https://support.cloudflare.com/hc/en-us/articles/200168926-How-do-I-use-CloudFlare-with-Amazon-s-S3-Service - campeterson

Answer 4

我遇到了if语句的问题，因为我没有一个$filename变量。

但是我使用以下类似的结果：

location ~ /\.(eot|otf|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }

- jamboNum5

---

我正在使用Nginx 1.4，这比“if”语句更好的方法。 - Rob Di Marco

Answer 5

使用CDN是除了自己托管外最不侵入性的方法，正如premjg所建议的。fontawesome的最新版本建议使用bootstrapcdn, 例如：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

作为一个小提示，noscript会默默阻止对CDN的请求，除非将其加入白名单，并且只有当您的页面还从同一域请求JS文件时，它才会提示您将CDN加入白名单。

- A Lee

---

@FirstLast - 我撤销了你的编辑，因为无条件强制使用“htpps”协议并不总是一个好主意（学习什么是“隐式协议URL”）。 - seven-phases-max

Answer 6

如果你和我一样，修改web.config文件是被禁止的。尝试将所有字体文件（.eot、.ttf等）存储到它们自己的本地文件夹中，并链接到本地，而不是使用FontAwesome CDN。每次都可以在IE和FF中清除它。

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }

- OneMohrTime

Answer 7

请在字体文件夹中上传以下文件：

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------重要的图标文件----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

上传完毕后，请将font-awesome.min.css链接到您的头文件。

以下是正确文件的链接： http://goo.gl/WICQAf

- Subhojit Mondal

Answer 8

如果你正在使用WordPress并且认为你已经尝试了所有方法，请查看一下是否安装了Font Awesome插件。禁用该插件并在Firefox中刷新。

这对我来说是解决方案 - 该插件的旧版本font-awesome覆盖了我试图手动更新的文件。

- bkbeachlabs