Font display swap что это
CSS font display: будущее рендера шрифтов в вебе
Дата публикации: 2017-10-30
От автора: если шрифт отсутствует на мобильном устройстве, его необходимо скачать. Это один из минусов веб-шрифтов. Пока шрифт не станет доступным, браузеру нужно решить, как отобразить блок текста с этим шрифтом. И сделать это нужно так, чтобы смена шрифтов несильно повлияла на UX и восприятие производительности.
Со временем браузеры приняли различные стратегии, дабы минимизировать эту проблему. Но эти стратегии работают по-разному, и разработчики совсем не контролируют процесс. Разработчикам приходилось разрабатывать различные техники и обходные решения для этих проблем.
Встречайте дескриптор font display CSS для правила @font-face. Это CSS свойство представляет стандартизированный подход к данному поведению и позволяет разработчикам контролировать процесс.
Использование font-display
Прежде чем подробно разобрать различные функции font-display, давайте быстро взглянем, как использовать его в CSS. Прежде всего, font-display не является свойством CSS. Как было сказано в начале, это дескриптор правила @font-face. (пример):
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В этом коде я задаю значение swap для шрифта Saira Condensed. Все возможные значения: auto, block, swap, fallback, optional
Значение по умолчанию для font-display – auto.
В следующих разделах я подробно разберу все эти значения. Но сначала давайте обсудим временной период, с помощью которого браузер рендерит шрифт. В разборе значений я объясню различные аспекты таймлайна, а также как они ведут себя с каждым значением.
Таймлайн font-display
В основе этой функции лежит концепция таймлайна font-display. Время загрузки шрифта, которое начинается от его запроса и кончается либо успешной загрузкой, либо провалом, можно разделить на три последовательных периода, которые говорят браузеру, как рендерить текст. Три периода:
Блочный период. В этом периоде браузер рендерит текст невидимым фолбек шрифтом. Если запрошенный шрифт загружается, текст перерисовывается с этим шрифтом. Невидимый фолбек шрифт ведет себя, как пустой плейсхолдер для текста. Таким образом, минимизируются сдвиги макета при повторном рендеринге.
Период подмены: если необходимый шрифт еще не доступен, используется фолбек шрифт. Только в этот раз текст уже отображается. Шрифт будет задействован, как только он подгрузится.
Период отказа: если шрифт так и не стал доступным, браузер не ждет его, и текст отображается с фолбек шрифтом, пока страница не будет закрыта. Однако это не значит, что загрузка шрифта была прервана. Браузер может продолжить загрузку, и шрифт будет готов к отображению при посещении других страниц.
Настройка продолжительности таких периодов позволяет конфигурировать кастомную стратегию рендера текста. В частности, эти значения можно установить в 0 или в бесконечность, что я покажу в следующих разделах.
Тем не менее, разработчики не могут явно устанавливать эти задержки. Такую возможность рассматривали в спецификации на раннем этапе, но позже от нее отказались. Вместо этого, как было сказано в предыдущем разделе, у нас есть набор значений из ключевых слов, который покрывает большую часть случаев использования.
Давайте рассмотрим, как все эти значения управляют загрузкой и отображением шрифтов.
font-display: auto
После короткого блокового периода это значение увеличивает период подмены до бесконечности (в спецификации рекомендуют 3 секунды). В таком случае период отказа отсутствует.
Браузер короткое время ждет шрифт и рендерит текст невидимым шрифтом. Далее если шрифт не доступен, фолбек шрифт становится видимым. Как только завершается загрузка запрошенного шрифта, браузер повторно рендерит текст.
Описанное поведение показано в видео ниже, где используется простая тестовая страница со специальным шрифтом в заголовке:
В начале загрузки страницы заголовок невидим, но он присутствует в DOM. Примерно через 3 секунды если шрифт все еще не доступен, текста становится видимым с фолбек шрифтом. В демо видео я имитирую слабое соединение с помощью панели разработчика Chrome. Как только шрифт загружается, заголовок повторно рендерится.
font-display: swap
С этим значением блоковый период сжимается до 0, а период подмены достигает бесконечности. Здесь также отсутствует период отказа. Другими словами, браузер не ждет шрифт и сразу рендерит текст с фолбек шрифтом. Как только шрифт загружается, текст рендерится заново. Давайте проверим:
font-display: fallback
Это первое значение, в котором есть период отказа. После очень короткого блокового периода (рекомендуется 100ms) наступает короткий период подмены (рекомендуется 3s). Если к концу этого времени шрифт все еще не готов, текст будет отображаться с фолбек шрифтом на все время посещения страницы. Посетителей не раздражают сдвиги в макете, которые могут снизить UX. В первом видео ниже шрифт загружается после более чем 6 секунд, поэтому он никогда не будет применен:
В следующем видео шрифт загружается быстрее до таймаута, поэтому шрифт используется, как ожидалось:
font-display: optional
Когда я впервые прочитал спецификацию, я не очень понял имена, присвоенные стратегиям отображения шрифтов. Даже в самой спецификации это отмечается. В следующих версиях предлагают использовать имена, которые лучше иллюстрируют способ использования стратегии. Предлагаются следующие альтернативы:
requires для block
important для swap
preferable для fallback
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Значение optional, скорее всего, не будет меняться. Оно и так отлично описывает поведение. С этим значением шрифт считается необязательным для рендера страницы, что говорит браузеру: «если шрифт уже доступен, используй его. Если нет, не так важно, используй фолбек шрифт. Шрифт может загрузиться к посещению будущих страниц».
С этим значением таймлайн имеет короткий блоковый период (рекомендуется 100ms) и нулевой период подмены. Таким образом, после блокового периода сразу наступает период отказа. Если шрифт не доступен, он не будет использоваться на этой странице. Шрифт может загружаться в фоновом режиме, и будет немедленно отрендерен при посещении будущих страниц.
Должен отметить, что на плохом соединении браузер может прекратить или даже не начать загрузку шрифта. Это происходит, чтобы не влиять на качество сетевого подключения. Сайтом можно пользоваться, однако шрифт не будет сразу доступен при посещении следующих страниц.
В видео ниже тестовая страница загружается без имитации плохого соединения. Шрифт загружается быстро, но только после короткого блокового периода. Поэтому текст отображается с фолбек шрифтом на все время работы со страницей.
В следующем видео страница перезагружается с теми же настройками сети, но в этот раз включен кэш для имитации второго посещения:
И вот оно, теперь заголовок рендерится с ожидаемым шрифтом. Прежде чем продолжим, заметьте, что для блокового периода со значениями fallback и optional рекомендуется очень небольшая задержка в 100ms. Это позволяет кратковременно отображать быстро загруженный шрифт (или шрифт из кэша), прежде чем использовать фолбек шрифт. Таким образом, избегается эффект «мигания нестилизованного текста» или VYN/
Мне самому интересно, почему при font-display: swap блоковый период сжимается до 0, а не использует тот же короткий интервал, как для optional. Оказывается, в GitHub репозитории спецификации открыт баг, где сказано, что swap должен использовать небольшую задержку, как и остальные значения.
О фолбек шрифте
Выше я несколько раз упомянул фолбек шрифт. Но откуда он берется? Фолбек шрифт – первый доступный для представления шрифт в стеке шрифтов, который задается с помощью свойства font-family на элементе. Например, на тестовой странице значение font-family для заголовка:
Свойство CSS font-display
Дата публикации: 2017-05-05
От автора: свойство CSS font-display определяет способ загрузки и отображения файлов шрифтов в браузере. Оно применяется к правилу @font-face, с помощью которого задаются кастомные шрифты.
Значения
Свойство font-display принимает 5 значений:
auto (по уомлчанию). Браузер использует стандартный метод загрузки, который зачастую похож на значение block.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
block. Браузер прячет текст до полной загрузки шрифта. Если точнее, то браузер отрисовывает текст прозрачным цветом, после чего заменяет его на шрифт. Метод также известен как «мигание невидимого текста» или МНТ.
swap. Браузер отображает фолбек шрифт до полной загрузки кастомного шрифта. Метод также известен как «мигание нестилизованного текста».
fallback. Что-то среднее между auto и swap. Браузер скрывает текст примерно на 100ms, и если шрифт не успел загрузиться, отображается фолбек до тех пор, пока не загрузится кастомный шрифт.
optional. Как и fallback, это значение заставляет браузер прятать текст, после чего плавно переходить на фолбек до полной загрузки кастомного шрифта. Однако это значение позволяет браузеру определять, а стоит ли вообще использовать кастомный шрифт. Для этого замеряется скорость соединения. На слабых соединениях кастомный шрифт загружаться не будет.
Зачем нам font-display
До широкой поддержки @font-face наш типографский арсенал был ограничен локальными шрифтами, и были доступны только шрифты, загруженные на компьютер пользователя. Такие шрифты называются «безопасными», так как браузеру не нужно ничего загружать для их рендеринга.
Затем пришло правило @font-face и дало веб-дизайнерам и front-end разработчикам силу, о которой они и подумать не могли раньше. С помощью этого правила мы могли загружать файлы шрифтов на сервер, задавать имена шрифтов и указывать ссылки на них. Это правило дало толчок сервисам типа Google Fonts, которые протолкнули кастомные шрифты в массы. Главное препятствие, отделяющее веб-дизайн от печатного дизайна, было преодолено.
Тем не менее, кастомные шрифты обходились (и обходятся) дорого. Файлы шрифтов могут много весить, что выливается в дополнительное время загрузки файлов, снижение производительности, в частности на устройствах с плохим соединением. Еще большую цену платят пользователи с ограниченными тарифами на трафик.
Еще одна проблема, которая возникла при использовании пользовательских шрифтов – «мигание нестилизованного текста». Раньше браузеры по умолчанию отображали системный шрифт, ожидая загрузки кастомного. Веб-страницы стали загружаться быстрее, но веб-дизайнеров беспокоил тот факт, что это отвлекало пользователей и искажало дизайн. Сейчас браузеры скрывают текст до тех пор, пока не загрузится кастомный шрифт, и это явление получило название «мигание невидимого текста» или МНТ.
Обоих эффектов стоит избегать. Для снижения этих эффектов есть методы оптимизации производительности шрифтов. Теперь же у нас есть свойство font-display, с помощью которого можно указать предпочитаемый способ загрузки.
Автор: Geoff Graham
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Управляйте шрифтами с помощью CSS font-display
Несколько способов сообщить браузеру, как подключить шрифт.
Загрузка пользовательских шрифтов при первом посещении негативно влияет на производительность веб-страницы. Как веб-разработчики и дизайнеры, мы всегда стараемся создать прекрасный, плавно работающий сайт, но чаще всего две этих цели расходятся. CSS свойство font-display помогает сбалансировать эстетичность и производительность.
С помощью font-display вы можете дать браузеру указания, каким способом загрузки шрифта пользоваться. Например, указать, насколько ваш шрифт важен, и когда система откажется от загрузки шрифта в случае, если она будет занимать слишком много времени. Вы можете добавить свойство font-display к вашему @font-face правилу.
Fallback
Если вы зададите свойству font-display значение fallback, то браузер будет ждать менее секунды, пока загрузится ваш пользовательский шрифт. Если к этому момент шрифт не загрузится, будет использован откат. В этом случае пользователю не придется долго разглядывать пустую страницу.
Загвоздка, конечно же, в том, что ваш прекрасный пользовательский шрифт не будет загружен на этой странице, а это, возможно, испортит внешний вид и впечатление от вашего сайта. font-display: fallback очень прямолинеен: если ваш шрифт не загрузился вовремя, то он не будет использован.
Если ваш пользовательский шрифт критически важен для дизайна сайта, для вас есть вариант получше. font-display: swap сразу же использует резервный шрифт. В этом случае, как только завершится загрузка вашего пользовательского шрифта, будь то через секунду или 5, браузер заменит резервный шрифт на ваш пользовательский. Стоит отметить, что смена шрифта может раздражать пользователя, особенно если он уже сфокусировался на чтении.
Block
Если вы все-таки решили, что ваш шрифт очень важен, используйте font-display: block. Это свойство скажет браузеру подождать некоторое время (около трех секунд), чтобы загрузить шрифты. В это время пользователь не будет видеть никакого текста. Через три секунды будет использован резервный шрифт.
С этого момента, неважно, как долго браузер будет загружать шрифты, он заменит недавно загруженный на резервный, даже если пользователь уже начал прокручивать и читать вашу страницу.
Какой способ использовать?
Если производительность стоит на первом месте, а пользовательские шрифты не очень-то вас волнуют, то font-display: fallback – это ваш выбор. Если пользовательский шрифт очень важен, то swap и block для вас.
Имейте в виду, что каким бы способом вы не воспользовались, сначала всё хорошо протестируйте.
Перевод статьи Control web typography with CSS font display
Автор оригинального текста: Umar Hansa
Стоит ли хранить Google Fonts на своём сервере?
В последние несколько недель, по стечению обстоятельств на работе и в сторонних проектах, я узнал много о веб-шрифтах, а также много нового о Google Fonts в частности. Благодаря этому я могу дать более развернутый ответ на вопрос, который в прошлом мне казался простым: стоит ли вам хранить Google Fonts на своём сервере?
Говоря объективно, признаю, шрифты — не моя сильная сторона. Я предпочитаю более практичный подход и не зацикливаюсь на дизайне (посмотрите на этот сайт и убедитесь, что так и есть) и прежде не чувствовал необходимости в использовании нестандартных шрифтов. Конечно, они выглядят немного приятнее и «брендируют» текст. Но для основного текста толку в них мало. Я никогда не оценивал статью (или иначе относился к её содержанию), только потому что для её подачи использовался красивый шрифт. Тем не менее, мне было полностью понятно негативное влияние дополнительных шрифтов на производительность и скорость загрузки страницы, так что, возможно, из-за этого я предвзят.
Тем не менее, многие со мной могут не согласится, да и шрифты, важны они лично для меня или нет, регулярно используются многими другими разработчиками, и часто у них просто нет выбора. Давайте посмотрим, что можно сделать, чтобы и в скорости сайта не потерять, и дизайнеров довольными оставить.
Self-Hosted vs Внешние ресурсы
Несколько лет назад считалось нормой использовать CDN для подключения общих ресурсов (например, jQuery с code.jquery.com — и да, им до сих пор очень даже пользуются). Чтобы внести ясность, под CDN здесь я имею в виду загрузку ресурсов с чужого домена, а не ваш собственный CDN.
Причиной было то, что браузеры якобы ограничивали количество соединений с каждым доменом (обычно до 6 соединений), поэтому использование другого домена давало вам ещё 6 соединений. Это могло быть правдой в прошлом (особенно когда ограничение было
Оптимизация сайта для GooglePage Speed (учтены все особенности после его обновления) Часть 1
Эта статья будет интересна, кто столкнулся с разного рода проблемами после обновления Google PageSpeed и претензиям со стороны заказчиков или начальника, почему упал бал или возникло такое количество замечаний. А так же тем, кто производит оптимизацию сайтов.
В первую очередь стоит упомянуть, что вот в этой статье, на мой взгляд, всё очень грамотно и доступно расписано.
Я же от себя добавлю больше практических советов, а так же будет интересно послушать вашу точку зрения и увидеть ваши наработки.
Перечислю о чём я буду говорить в этой статье:
CSS и JS
Шрифты
Я обнаружил новое для себя css свойство для шрифтов
А конкретно, его параметр swap, который не дожидаясь подгрузки вашего красивого и тяжёлого шрифта показывает текст в браузере используя встроенный в этот же браузер шрифт (например sans-serif). Это сразу же убирает одну из ошибок в GPSpeed.
Выглядеть это будет так
Так же есть такой скрипт (для его работы нужно подключить fontfaceobserver.js):
Лично мне не очень помог, но вы попробуйте, может вы лучше с ним совладаете. Ведь я нашёл его на просторах, и люди говорили, что действительно помогает.
Подключение шрифтов
Изображения, картинки и т.д.
За следующие 2 совету ручаюсь, помогли не только мне, а всему офису и даже друзьям отдалённо работающим.
1. Загружайте абсолютно все картинки с помощью lazyloading. Выглядеть это будет так
И не забудьте подключить lazyload.min.js
2. Если у вас на странице много svg элементов, то их лучше добавлять чистым кодом, без лишнего обращения к тегу img. Кроме того, svg необходимо ужимать, например, с помощью этого сайта jakearchibald.github.io/svgomg (не реклама).
3. Банально, но не забывайте ужимать ВСЕ картинки на сайте. Даже те, которые весят 5кб. Хоть эти 3 кб которые вы выиграйте никак не повлияют на скорость загрузки, вы избавитесь от ошибки на GPSpeed, и добавите себе до 10 баллов.
!Теперь проблемный момент — форматы изображений. А именно нас волнует webp, JPEG 2000, JPEG XR. Ведь сейчас это один из рекомендуемых GPSpeed-ом расширений. Как известно, они до сих пор не поддерживается некоторыми браузерами, среди которых достаточно популярный Mozila Firefox. Хоть они и объявили, что в марте будет полная поддержка этого формата, нам всё-равно ещё год ждать, пока все юзеры этого браузера обновятся до последней версии… Я перерыл кучу сайтов, кучу скриптов, но толкового ничего не нашёл. По этому теперь настало моё время задать вопрос вам: используете ли вы формат webp или любые другие новые форматы изображений? И как вы это делаете?