字体真棒在 Firefox 中不起作用 [英] Font awesome not working in Firefox

问题描述

我正在使用引导程序，并通过 Less 添加了很棒的字体，覆盖了 Glyphicons.图标在 chrome 中显示正常，但在 Firefox 中我只看到框.

I'm using bootstrap and I added font awesome through Less, overriding the Glyphicons. The icons display OK in chrome but in Firefox i just see boxes.

这是我的目录的样子

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

我在 Project > 中修改的所有内容少 >boostrap.less 文件已:

@import "sprites.less";

//for this line

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

正如我在 Chrome 中所说的那样工作正常但由于某种原因 Firefox 只显示框.

As I said in Chrome works fine but for some reason Firefox shows only boxes.

推荐答案

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

Custom web fonts via CDN (or any cross-domain font request) doesn't work in Firefox or Internet Explorer (correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers.

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

You can fix this by adding headers to your page.

阿帕奇

<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

这篇关于字体真棒在 Firefox 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！