Как использовать uri данных с @font-face в Firefox

Я разрабатываю заставку для общедоступной точки доступа Wi-Fi, и Firefox отказывается отображать мой пользовательский шрифт, в то время как он работает в любом другом браузере (ну, не IE

Страница должна работать в следующем ограничении:

  • нет доступа в Интернет : эта страница отображается до того, как пользователь примет условия и условия, поэтому все заблокировано
  • страница хранится на точке доступа : это означает, что встроенный сервер, вероятно, записан в C, и я действительно не могу добавить дополнительный заголовок или что-то еще. Ну его открытый исходный код, так что это может быть возможно, но я, безусловно, не встроенный разработчик!
    • Wi-Fi используется для рекламы небольшого города, в котором он предлагается, поэтому он должен быть как можно красивее.

Для удовлетворения этих ограничений я использовал @font-face с uri данных, например: 

@font-face {
    font-family: Lato-Light;
    src: url(data:application/font-woff;base64,<large base64 string>) 
         format('woff');
}

h1{
    font-family: Lato-Light, Helvetica, sans-serif;
}

Это работает как заклинание... Кроме как в Firefox. Теперь я понимаю, что это не будет работать в старых IE, но я готов работать с этим. Но мне кажется странным, что так называемый современный браузер не предлагает эту функцию. Почему это не работает?

EDIT: конечно, у меня есть много идей для резервного копирования, но мой вопрос здесь больше : почему firefox имеет такое поведение, которое не совпадает с другими браузерами? Это что, режим безопасности? Ошибка в реализации data-uri? Ограничение размера для данных-uri?

2 4
css3 firefox font-face data-uri

2 ответа:

В конце концов, проблема заключалась в том, что я использовал генератор шрифтов woff, который произвел неправильный шрифт. Safari и IE смогли прочитать его, но Firefox и последняя версия Chrome отклонили его, так как он содержал некоторые ошибки. Используя более поздний генератор шрифтов woff, я смог заставить его работать во всех браузерах.

Правильный генератор шрифтов woff

Http://people.mozilla.org/~jkew / woff /

Для получения более подробной информации проверьте отчет об ошибках :

Https://bugzilla.mozilla.org/show_bug.cgi?id=735556

Я хотел бы поблагодарить Джонатана Кью из Mozilla за предоставленный ответ.

4

Чтобы сократить HTTP-запросы, я subset и Base64 встроили пару webfonts в мой CSS (Font Squirrel @font-face generator, advanced settings, и для шрифтов значков я использовал icomoon.io).

Думая, что я действительно умный, я служил им из статики subdomain...No заходим в Firefox.

Оказывается, это была ограничительная настройка междоменных ресурсов, которая, по-видимому, уникальна для Firefox. Когда я загрузил стандартный шаблон HTML5 .htaccess файл, он специально разрешает это и это позаботился о проблеме.

Надеюсь, это поможет будущим читателям, это поставило меня в тупик на некоторое время...извините, если мои термины не точны, я все еще довольно новичок в этом (это хорошо объяснено в H5BP .реврайт комментарии и документы).

-1