Значки, используемые через шрифты (размещенные локально), не будут отображаться в Firefox

#css #ruby-on-rails #firefox #fonts

#css #ruby-on-rails #firefox #шрифты

Вопрос:

Я локально размещаю свои иконки в виде шрифтов, используя @font-face в файле font.css.sass и ссылаюсь на это в общем файле style.css.scss. (Я, по сути, скопировал-вставил-модифицировал с сайта для создания значков социальных сетей, PerfectIcons.com . Значки отображаются точно так, как ожидалось, во всех браузерах, кроме Firefox. Несмотря на это, Firefox получает и отображает мои другие шрифты @font-face без проблем.

Возможно, проблема связана с файлом svg, который используется для социальных значков, и с тем, как Firefox обрабатывает это?

ПРИМЕЧАНИЕ. приведенный ниже asset_url предназначен для Rails 4 и Heroku.

 @font-face {
  font-family: 'si';
  src:    asset_url('socicon.eot');
  src:    asset_url('socicon.eot?#iefix') format(embedded-opentype),
          asset_url('socicon.woff') format(woff),
          asset_url('socicon.ttf') format(truetype),
          asset_url('socicon.svg') format(svg);
  font-weight:400;
  font-style:normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'si';
    src: asset_url('socicon.svg') format(svg);
  }
}

А затем style.css.scss:

 .soc
  overflow: hidden
  margin: 0
  padding: 0
  list-style: none
  text-align: right
  margin-right: 100px

 .soc li
   display: inline-block
   *display: inline
   zoom: 1

.soc li a
  font-family: si !important
  font-style: normal
  font-weight: 400
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  -ms-box-sizing: border-box
  -o-box-sizing: border-box
  box-sizing: border-box
  text-decoration: none
  text-align: center
  display: block
  position: relative
  z-index: 1
  width: 35px
  height: 35px
  line-height: 35px
  font-size: 19px
  @include border-radius(50px)
  color: #c9c8c8
  background-color: #383838
  opacity: .8

.soc-icon-last
  margin: 0 !important

.soc-twitter:before
  content: 'a'

.soc-facebook:before
  content: 'b'

.soc-google:before
  content: 'c'

1. Можете ли вы предоставить ссылку на сайт? Это поможет дать ответ.

2. Я вижу значки социальных сетей в моем Firefox.

3. Я попробовал это без Rails, просто HTML-файл в браузере. То же самое… это работало для Chrome и Safari, но не для Firefox. На всякий случай, для FF он по-прежнему показывает буквы / цифры с цветами, но не фактические значки.

4. Когда я перехожу к URL-адресу в Firefox, я вижу фактические значки. Вы используете самую последнюю версию Firefox? Попробуйте также очистить кеш. Возможно, он кэшировал неверный файл.

5. Я использую FF 30. Очищен кэш… но не повезло.

Ответ №1:

Спецификаторы формата должны быть в кавычках, как показано ниже:

 @font-face {
  font-family: 'si';
  src:    asset_url('socicon.eot');
  src:    asset_url('socicon.eot?#iefix') format('embedded-opentype'),
          asset_url('socicon.woff') format('woff'),
          asset_url('socicon.ttf') format('truetype'),
          asset_url('socicon.svg') format('svg');
  font-weight:400;
  font-style:normal;
}

Ответ №2:

Просто замените этот код своим кодом:

 @font-face {
  font-family: 'si';
  src:    url('<%= asset_path('socicon.eot') %>');
  src:    url('<%= asset_path('socicon.eot)   '?#iefix' %>') format('embedded-opentype'),
          url('<%= asset_path('socicon.woff') %>') format('woff'),
          url('<%= asset_path('socicon.ttf') %>') format('truetype'),
          url('<%= asset_path('socicon.svg') %>') format('svg');
  font-weight:400;
  font-style:normal;
}

Измените расширение файла css на .css.scss.erb