Как использовать данные URI с @ font-face в Firefox - PullRequest
Новая
       33

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

4 голосов
/ 14 марта 2012

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

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

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

Чтобы соответствовать этим ограничениям, я использовал @ 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, но я готов работать с этим. Но мне кажется странным, что так называемый современный браузер не предлагает такую ​​функцию. Почему это не работает?

РЕДАКТИРОВАТЬ: Конечно, у меня есть много идей для отступления, но мой вопрос здесь больше: почему Firefox имеет такое поведение, которое отличается от других браузеров? Это настройка безопасности? Ошибка в реализации data-uri? Ограничение размера для data-uri?

Ответы [ 2 ]

4 голосов
/ 16 марта 2012

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

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

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

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

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

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

0 голосов
/ 02 сентября 2012

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

Думая, что я был действительно умен, я обслуживал их со статического поддоменов ... В Firefox не ходи.

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

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

...