Question

我正在使用bootstrap，我通过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只显示了一些框。

Answer 1

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

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

的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

Answer 2

如果您想快速轻松地制作字体效果，请尝试使用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">

Answer 3

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

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

Answer 4

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

但我确实使用了相似的结果：

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

Answer 5

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

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

作为次要注释，noscript会静默阻止对CDN的请求，除非列入白名单，和它不会提示您将CDN列入白名单，除非您的页面还请求来自同一域的JS文件。

Answer 6

如果你像我一样，修改web.config文件是你不允许触摸的。

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

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

Answer 7

我已将代码放入.htaccess

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

现在工作正常。谢谢。感谢您的帮助

Answer 8

如果你正在使用wordpress而你认为自己已经尝试了所有内容，请查看是否安装了 Font Awesome插件。禁用插件并在Firefox中刷新。< / p>

这是我的解决方案 - 该插件的旧版本字体真棒覆盖了我试图手动更新自己的文件。

Answer 9

在fonts文件夹中，请上传以下文件

FontAwesome.otf
  fontawesome-webfont.eot
  fontawesome-webfont.svg
  fontawesome-webfont.ttf
  fontawesome-webfont.woff
   ------------------重要的字形文件----------------
  glyphicons，半身人，regular.eot
  glyphicons，半身人，regular.svg
  glyphicons，半身人，regular.ttf
  glyphicons-半身-regular.woff

请上传以下文件，然后在头文件中链接font-awesome.min.css。

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

字体真棒不在Firefox中工作

9 个答案: