字体真棒不在Firefox中工作

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(或任何跨域字体请求)的自定义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

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">

Answer 3

如果您在S3上托管字体,则必须在存储桶上启用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 *;
    }