为什么我的字体真棒图标在页面加载时消失了？

Question

知道为什么我的字体真棒图标最初会在页面上显示,然后在页面实际加载后变成空白正方形吗？这是我的gemfile:

 gem 'rails', '4.0.1'
 gem 'bootstrap-sass', '2.3.2.0'
 gem 'bcrypt-ruby', '3.1.2'
 gem 'faker', '1.1.2'
 gem 'will_paginate', '3.0.4'
 gem 'bootstrap-will_paginate', '0.0.9'
 gem "libv8", ">= 3.11.8"
 gem "therubyracer", ">= 0.11.0", :group => :assets, :platform => :ruby, :requir\
 e => "v8"
 gem 'execjs'
 gem 'rails_12factor', group: :production
 gem 'font-awesome-rails'
 gem 'font-awesome-sass'

我的application.css文件:

  *= require_self
  *= require_tree .
  *= require font-awesome
  */

 @import 'twitter/bootstrap';
 @import 'font-awesome/font-awesome';

这是我如何调用图标:

<section id="our-services" class="pad-top-50">
                     <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <div class="service">
                                <span class="service-icon">
                                <i class="fa fa-android"></i>
                                </span>

Answer 1

由于此版本渲染错误仍然存​​在于Chrome版本33.0.1750.152中,因此现在的临时解决方法是强制元素重新绘制而无需任何用户交互.这可以通过CSS改变FontAwesome图标的一些属性来完成,这些图标通过webkit动画消失(遗憾的是,它仍使用前缀).

这个简单的修复使用了淡入动画:

i.fa {
  -webkit-animation: show 1s 1;
  /* any other properties to override from FontAwesome's default .fa rule */
}
@-webkit-keyframes show {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

这不是最性感的解决方案,但在此期间它可以解决问题.

注意:任何低于3秒的持续时间似乎都不会为淡入淡出设置动画,因此当Chrome加载字体并呈现它时(通常会有轻微延迟),它看起来就像通常看起来一样.如果要查看效果,请为动画使用3秒或更多.向动画添加延迟也可能会以较短的持续时间显示效果,但这不是此修复的目的,因此如果您愿意,可以自行进行实验.

此外,如果您没有要覆盖的任何其他属性,例如由于FontAwesome图标和文本未对齐而导致的行高,您可以简单地使用.fa而不是i.fa我上面使用的更高特异性规则.

我真的希望Chrome开发人员能够开发更多边缘功能.在最近的版本中,以前工作得很好的几种实验性CSS样式/效果的外观和感觉已显着降低.这真让我烦恼.

Answer 2

Chrome目前存在一个关于网络字体渲染的漏洞.看到这里,这里和这里.