Почему мои шрифты исчезают при загрузке страницы?

Любая идея, почему мои шрифтовые удивительные значки будут отображаться первоначально на странице, а затем превращаются в пустые квадраты после загрузки страницы? Здесь мой 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>

Ответ 1

В настоящее время в Chrome обнаружена ошибка в отношении рендеринга веб-шрифтов. Здесь , здесь и здесь.

Ответ 2

Так как эта ошибка от шрифтов до сих пор существует в Chrome с версии 33.0.1750.152, временным обходным решением для этого было бы заставить элементы перерисовываться без какого-либо взаимодействия с пользователем. Это можно сделать с помощью CSS, изменив некоторые свойства значков FontAwesome, которые исчезают с помощью анимации webkit (которая, к сожалению, все еще использует префиксы).

В этом простом исправлении используется анимация затухания:

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

Это не самое сексуальное исправить, но в то же время он делает трюк.

Примечание. Любая длительность ниже 3 секунд на самом деле не оживляет анимацию, поэтому она выглядела бы так, как обычно может выглядеть, когда Chrome загружает шрифт и отображает его (с его типичной небольшой задержкой). Если вы хотите, чтобы эффект был замечен, используйте для анимации 3 или более раз. Добавление задержки к анимации может также показать эффект с меньшей продолжительностью, но это не цель этого исправления, поэтому поэкспериментируйте по своему усмотрению, если хотите.

Кроме того, если у вас нет других свойств, которые вы хотите переопределить, например line-height из-за несоосности значков FontAwesome и текста, вы можете просто использовать .fa вместо правила более высокой специфичности i.fa, которое я использовал выше.

Я действительно хочу, чтобы разработчики Chrome работали над дополнительными функциями. Внешний вид нескольких экспериментальных стилей/эффектов CSS, которые были использованы для работы, значительно снизились в последних версиях. Меня это очень раздражает.

Ответ 3

У меня была та же проблема: она была решена путем перемещения css-стилей из раздела <body> в <head>.

Ответ 4

с помощью google chrome webdeveloper инструмент сетевой монитор проверить файлы шрифтов правильно загружаются, а если не добавлять расширения шрифтов шрифтов в mime-типах. fooobar.com/questions/448435/...

Ответ 5

Добавьте это в GEMFILE

gem "font-awesome-rails"

И запустите

установить пакет.

И если вы предпочитаете SCSS, добавьте это в свой файл application.css.scss:

@import "font-awesome";