21

我正在使用引导程序，并通过 Less 添加了很棒的字体，覆盖了 Glyphicons。图标在 chrome 中显示 OK，但在 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 只显示框。

4

8 回答 8

28

通过 CDN（或任何跨域字体请求）的自定义 Web 字体在Firefox或Internet Explorer中不起作用（按规范正确），尽管它们在基于 Webkit 的浏览器中起作用（错误地如此）。

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

阿帕奇

<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

于 2013-06-26T16:57:19.007 回答
24

如果您想要一种快速简便的方法来使 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">
于 2013-10-21T01:32:34.920 回答
10

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

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>
于 2013-08-08T15:27:29.607 回答
6

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

但我确实有类似的结果使用：

location ~ /\.(eot|otf|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }
于 2013-07-22T11:58:55.677 回答
4

除了自己托管之外，按照 premjg 的建议使用 CDN 是侵入性最小的方法。最新版本的 fontawesome建议使用 bootstrapcdn，例如，

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

作为一个小提示，noscript 会静默阻止对 CDN 的请求，除非被列入白名单，并且它不会提示您将 CDN 列入白名单，除非您的页面还请求来自同一域的 JS 文件。

于 2014-05-23T06:25:32.833 回答
1

如果你和我一样，修改 web.config 文件是你不能碰的。

尝试将所有字体文件（.eot、.ttf 等）存储到它们自己的本地文件夹中，并在本地链接到它们而不是 FontAwesome CDN。每次都在 IE 和 FF 中为我清除它。

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }
于 2013-08-05T14:48:44.903 回答
0

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

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

于 2014-08-11T02:22:30.503 回答
0

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

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

于 2015-05-01T01:32:54.613 回答