firefox - 很棒的字体在 Firefox 中不起作用

Question

我正在使用 bootstrap，并通过 Less 添加了很棒的字体，覆盖了 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 只显示框。

Answer 1

通过 CDN(或任何跨域字体请求)的自定义 Web 字体在 Firefox 或 Internet Explorer 中不起作用(根据规范，正确的是)，尽管它们可以在基于 Webkit 的浏览器中工作(不正确)。

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

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