Question

我知道为什么我的字体真棒图标最初会在页面上显示，然后在页面实际加载后变成空白正方形？这是我的宝石文件：

 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中，因此现在的临时解决方法是强制元素重新绘制而无需任何用户交互。这可以通过改变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秒或更多。为动画添加延迟也可能会显示持续时间较短的效果，但这不是此修复的目的，因此如果您愿意，可以自行进行实验。

此外，如果您没有任何其他想要覆盖的属性，例如line-height due to misalignment of FontAwesome icons and text，您只需使用.fa代替我使用的更高特异性规则i.fa上方。

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

Answer 2

Chrome目前存在一个关于网络字体渲染的漏洞。请参阅here，here和here。

Answer 3

我遇到了同样的问题：它是通过将css样式从<body>移动到<head>部分来解决的。

Answer 4

使用google chrome web开发人员工具网络监视器检查字体文件是否正确加载，如果没有在mime类型中添加字体文件扩展名。 https://stackoverflow.com/a/5535020/3212522

Answer 5

在GEMFILE中添加

gem "font-awesome-rails"

然后运行

捆绑安装。

如果您更喜欢SCSS，请将其添加到您的application.css.scss文件中：

@import "font-awesome";

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

5 个答案: