Олег Уласюк
29 ноября 2012

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



Олег!

Недавно я делал сайт с заголовками, набранными кастомным шрифтом. Мне тоже не понравилось, как ведёт себя сайт во время загрузки — в одном браузере скачки шрифтов, в другом пустота вместо текста.

В Гугле попадались методы, помогающие побороть только дыры — например, такой — показываем текст стандартным шрифтом, грузим специальный шрифт асинхронно, а при его загрузке уже расставляем классы, включающие это начертание у определённых блоков. Не то!

Текст нужно показывать сразу. Я уже хотел убеждать дизайнеров отказаться от красивых заголовков — технология слишком сырая. Но решил пересмотреть код подключения шрифта, и увидел что-то вроде этого:

@font-face {
  font-family: 'Super Font';
  src: url('super-font.eot');
  src: url('super-font.eot?#iefix')
           format('embedded-opentype'),
       url('super-font.woff') format('woff'),
       url('super-font.ttf') format('truetype'),
       url('super-font.svg#superfont') format('svg');
  font-weight: normal;
  font-style: normal;
}
  • Сколько форматов — EOT, WOFF, TTF, SVG! Я проверил таблицы совместимости и решил оставить только два формата:
  • WOFF — для современных браузеров, включая ИЕ 9 и 10;
  • EOT — для ИЕ 8 и ниже.

Как дальше развивалась моя мысль — не помню, что-то щёлкнуло :-) WOFF я сконвертировал в base64 и вставил прямо в ЦСС — текст начал показываться вместе со всем сайтом моментально:

Какие браузеры поддерживают WOFF
@font-face {
  font-family: 'Super Font';
  src: url(data:application/x-font-woff;...) format('woff');
  font-weight: normal;
  font-style: normal;
}

EOT для ИЕ подключил ссылкой на файл, как в первом примере, а скачки в старых версиях списал на грациозную деградацию.

@font-face {
  font-family: 'Super Font';
  src: font-url('super-font.eot');
  font-weight: normal;
  font-style: normal;
}
Да, файл стал тяжелее, но это не критично, так как те же килобайты грузились бы в виде шрифтового файла.

Очень важно разделить подключение эти двух форматов на два файла и не грузить в ИЕ несколько сот лишних килобайт ЦСС.

О подключении стилей для ИЕ

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.
P. P. S.
Конвертировать шрифты в нужные форматы и кодировать в base64 удобно на сервисе Font Squirrel.

Поделиться

Комментарии

Денис Талала
29 ноября 2012

Спасибо за совет, Артём!

Дополню. Ещё можно подгружать из файла шрифта только необходимые символы, что позволяет дополнительно сократить размер загружаемой информации и, соответственно, время загрузки.

Например, в этой статье говорится, как это делать: http://habrahabr.ru/post/130172/

Андрей Ситник
29 ноября 2012

Base64 хорош для каких-то уникальных шрифтов. Если подключаешь шрифты с Google Web Fonts (что очень правильно, так как шрифт попадает в кеш, как и jQuery с Google CDN), то такую хитрость применить не удастся.

Проблема, конечно, чисто в альтернативном мышлении разработчиков webkit, которые почему-то не показывают системный шрифт, пока грузиться кастомный.

В качестве решения для webkit можно использовать Google WebFont Loader, которые меняет классы у body в зависимости от загрузки шрифтов — чтобы не быстро скачков, нужно подобрать запасной системный шрифт такого же размера.

А ещё я всегда убираю кастомные шрифты на мобильной версии, потому что не раз попадал в ситуацию, когда сайт загрузился за десяток секунд, но прочитать я ничего не могу, так как дальше грузится файл шрифтов в пару мегабайт.

Илья Ахмадуллин
29 ноября 2012

SVG наверно лучше оставить для хрома под виндой:
http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Сделал скриншот в хроме, слева стандартное подключение шрифта, справа исправлен порядок загрузки шрифтов и первым подключается SVG-шрифт:
http://gyazo.com/7f5b4711274e00abfafef4511be3a4f7

Дмитрий Шимкин
29 ноября 2012

Основной минус размещения шрифта в виде base64 непосредственно файле со стилями — пользователи с узким каналом будут видеть пустой белый экран как минимум до тех пор, пока не загрузится этот тяжелый css.

Игорь Барбашин
29 ноября 2012

Илья, похоже вариант с SVG игнорирует системный хинтинг шрифтов, что делает текст мелкого кегля нечитаемым. Но для заголовков это очень хороший вариант. На винде действительно рендеринг текста еще далёк от идеала.

Анатолий Лунёв
26 августа 2014

Написал небольшой сервис по этому совету: http://blog.toliklunev.ru/all/cssfont/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1




Недавно всплыло

Уместно ли травить леску перед выступлением? 1 3 Директору магазина не понравился мой ответ, потому что, по его мнению, я унизила магазин 2 Как перестать бояться обсуждать задачу с клиентом? 2



© 2007—2016

Запрещённые слова
Пишите: artgorbunov@artgorbunov.ru