Причуды Firefox CSS @font-face

Итак, у меня есть настройка @font-face, которая работает во всем, кроме firefox — обычное дело, согласно google.

Вот причудливый бит. Если я установлю шрифт жирным шрифтом (в firebug), он будет работать, если я верну его в нормальное состояние, он вернется.

Если я отредактирую шрифт в firebug, он будет работать мгновенно, даже если я верну его к тому, что было изначально.

eg:

@font-face {
    font-family: PlayBold;
    src: url(Play-Bold-webfont.eot);
    src: url(Play-Bold-webfont.eot?#iefix) format('embedded-opentype'),
         url(Play-Bold-webfont.woff) format('woff'),
         url(Play-Bold-webfont.ttf) format('truetype'),
         url(Play-Bold-webfont.svg#PlayBold) format('svg');

    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

#testtext {
    font-family: PlayBold;
}

Результат: шрифт не используется.

Зайдите в firebug и измените что-нибудь в шрифте (даже просто замените символ на тот же символ, который у него был раньше), и он снова начнет работать.

Почему firefox изначально не загружает шрифт правильно?

Хром 28, фаерфокс 22.


person J V    schedule 01.08.2013    source источник


Ответы (1)


Когда Gecko отображает страницу, на которой используются веб-шрифты, он сначала отображает текст, используя лучший резервный шрифт CSS, доступный на компьютере пользователя, пока он ожидает завершения загрузки веб-шрифта. По завершении загрузки каждого веб-шрифта Gecko обновляет текст, в котором используется этот шрифт. Это позволяет пользователю быстрее читать текст на странице.

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

ЧТО ПОПРОБОВАТЬ:

  • перетасовка форматов шрифтов, возможно, сначала поставив TTF или WOFF
  • удаление «вариант шрифта: нормальный;» из объявления "@font-face", потому что ему там не место
  • правильно указать uri в вашем URL-адресе css (file.ttf) -> url ('file.ttf')
  • ~в крайнем случае~ используйте генератор данных uri и вставляйте шрифты в CSS

    src: url('data:application/octet-stream;base64,BLAHBLAHBLAH==') format('embedded-opentype'),

person Louis Ricci    schedule 01.08.2013
comment
За исключением того, что он вообще никогда не загружает шрифт - сетевая панель показывает ответ 200 в файле шрифта, но он не используется, пока я не испорчу CSS в firebug. - person J V; 01.08.2013
comment
@JV - Какую операционную систему вы используете? - person Louis Ricci; 01.08.2013
comment
Linux, но мой босс получает тот же результат на Windows. Веб-страница/шрифты/и т.д. размещены на linux/apache - person J V; 01.08.2013
comment
@JV - я добавил кое-что, чтобы попробовать. - person Louis Ricci; 01.08.2013
comment
И я попробую их через минуту, но мой хост решил облажаться, поэтому я пытаюсь вернуться к этому. - person J V; 01.08.2013
comment
Хорошо, теперь, когда у меня снова есть доступ, похоже, он работает. Любые и все изменения, перечисленные выше, больше не имеют значения. Это просто работает. Странная вещь. Я отмечу ваш ответ как ответ, потому что он может пригодиться людям, которым нужна помощь позже. - person J V; 01.08.2013