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

问题描述

我使用bootstrap，并通过Less添加字体，重写Glyphicons。这些图标在Chrome浏览器中显示OK，但是在Firefox中，我只是看到了一些框。

这就是我的目录：

<$项目
- js
- css
- 减
- 字体 - 真棒
- css
- font
- less

所有我在项目>更少> boostrap.less 文件已被：

  @importsprites.less; 
 
 //为这一行
 
 @import../font-awesome/less/font-awesome.less; 
  

正如我在Chrome中所说的那样工作正常，但由于某些原因，Firefox只显示框。 b $ b

解决方案

通过CDN（或任何跨域字体请求）的自定义Web字体在Firefox或Internet Explorer中无法正常工作虽然他们在基于Webkit的浏览器中工作（不正确）。

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

Apache

 < FilesMatch。（eot | ttf | otf | woff）> 
标题集Access-Control-Allow-Origin*
< / FilesMatch> 
  

Nginx

  if（$ filename〜* ^。*？\。（eot）|（ttf）|（woff）$）{
 add_header Access-Control-Allow-Origin *; 
} 
  

得分： http://davidwalsh.name/cdn-fonts

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.

This is how my directory looks like

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

All I've modified in the Project > less > boostrap.less file has been:

@import "sprites.less";

//for this line

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

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

解决方案

Custom web fonts via CDN (or any cross-domain font request) don'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.

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 *;
    }

Credit: http://davidwalsh.name/cdn-fonts

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