Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 16
Ха, весьма элегантное решение, спасибо. Добавил в избранное.
Что касается разных шрифтов в разных браузерах… А нельзя на сервере определять браузер и выдавать шрифт в нужном формате (уже закодированным в dataurl)?
Конечно, можно. Это будет максимально доброжелательно для всех посетителей. При этом всё равно нужно указывать альтернативные версии шрифтов — вдруг браузер неверно определится.
В моём случае определять браузер оказалось нецелесообразно; тех, кому пришлось скачивать дополнительную версию шрифта, помимо
К тому же, своим способом я постарался избежать вмешательств в серверную часть.
В моём случае определять браузер оказалось нецелесообразно; тех, кому пришлось скачивать дополнительную версию шрифта, помимо
woff, оказалось меньше половины процента.К тому же, своим способом я постарался избежать вмешательств в серверную часть.
Google Fonts именно так и делает
Почти так.
Всё-таки Google Fonts отдаёт шрифт отдельным файлом, поэтому описываемый мной эффект может наблюдаться. Для его устранения у них есть js-инструмент WebFont Loader.
Всё-таки Google Fonts отдаёт шрифт отдельным файлом, поэтому описываемый мной эффект может наблюдаться. Для его устранения у них есть js-инструмент WebFont Loader.
Плохой способ. base64 увеличивает количество подгружаемых данных. К тому же, вы даете гарантию, что разработчик, который будет поддерживать код после вас, поймет ваши пляски со шрифтами?
Самый лучший способ — вырезать все неиспользуемые символы из шрифта, перекодировать шрифт с помощью белки и наслаждаться удивительным результатом. Таким способом можно урезать шрифт до трети от первоначального размера.
Самый лучший способ — вырезать все неиспользуемые символы из шрифта, перекодировать шрифт с помощью белки и наслаждаться удивительным результатом. Таким способом можно урезать шрифт до трети от первоначального размера.
Что никак не спасёт от мигания при пинге в 500мс, например. Поэтому, имхо, лучше совместить приятное с полезным — урезать и заэмбедить.
Борьба с ветрянными мельницами. Проблема сегодняшнего дня — не большое количество соединений и не большие пинги, а страницы по 5-6 мегабайт.
Например, сотовые сети выдают вполне приличный пинг, однако в силу технологии не могут давать большие скорости. К тому же, современные браузеры не разрывают соединение с сервером, стараясь выкачать побольше статики за один присест, что сводит положительные свойства от данной практики к нулю, а вот отрицательные стороны никуда не деваются.
Я всё же останусь при мнении, что данная техника порочна, так как является не нужной оптимизацией и увеличивает размер страницы. Всегда есть вещи, которые можно было бы оптимизировать, чтобы извлечь бОльшую выгоду, чем от данного способа. Например, объединение картинок в спрайты, загрузка шрифтов до скриптов или объединение скриптов в один файл.
Например, сотовые сети выдают вполне приличный пинг, однако в силу технологии не могут давать большие скорости. К тому же, современные браузеры не разрывают соединение с сервером, стараясь выкачать побольше статики за один присест, что сводит положительные свойства от данной практики к нулю, а вот отрицательные стороны никуда не деваются.
Я всё же останусь при мнении, что данная техника порочна, так как является не нужной оптимизацией и увеличивает размер страницы. Всегда есть вещи, которые можно было бы оптимизировать, чтобы извлечь бОльшую выгоду, чем от данного способа. Например, объединение картинок в спрайты, загрузка шрифтов до скриптов или объединение скриптов в один файл.
К тому же, вы даете гарантию, что разработчик, который будет поддерживать код после вас, поймет ваши пляски со шрифтами?
Если это не знакомый мне разработчик, гарантию не дам :)
Но способ задокументирую и уверен, что всё будет хорошо.
данная техника порочна, так как является не нужной оптимизацией и увеличивает размер страницы. Всегда есть вещи, которые можно было бы оптимизировать, чтобы извлечь бОльшую выгоду, чем от данного способа. Например, объединение картинок в спрайты, загрузка шрифтов до скриптов или объединение скриптов в один файл
Вообще, подключаемые шрифты увеличивают размер страницы сами по себе, а в этой статье я пишу только про эффект, с ними связанный.
Своим методом я не отменяю необходимость оптимизации других аспектов. Конечно, всё это — и даже больше — нужно делать, вырезать неиспользуемые символы в том числе.
Для примера к статье я использовал PT Sans Narrow с большим количеством символов, которые я, скорее всего, никогда не буду использовать. Но ничего не мешает мне на реальном сайте их все вырезать, как вы описали.
Да,
base64 увеличивает размер шрифта, но gzip практически нивелирует разницу.
Хотя мне и не нравится мода хранить тяжелые файлы в data:URI, стоит отметить, что woff-шрифт в base64 сжатый gzip на какие-то байты больше обычного woff (хоть тот gzip'нут хоть нет — и так уже сжат).
А как кодировать шрифты в data:uri?
Для себя определил два варианта:
— кодировать генератором (например, таким), когда результат нужен быстро;
— использовать генератор белки-шрифтелки, если нужно что-то посерьёзнее — к примеру, вырезать ненужные символы — в экспертном режиме есть опция «Base64 Encode, embed font in CSS».
В конце концов, после генерации следует удостовериться, что
— кодировать генератором (например, таким), когда результат нужен быстро;
— использовать генератор белки-шрифтелки, если нужно что-то посерьёзнее — к примеру, вырезать ненужные символы — в экспертном режиме есть опция «Base64 Encode, embed font in CSS».
В конце концов, после генерации следует удостовериться, что
mime-type у закодированного шрифта проставлен в соответствии со спецификацией — application/font-woff (хотя Хром утверждает, что должно быть application/x-font-woff).Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Ещё один способ устранить ВОШ