Лучшие сервисы подбора комбинаций шрифтов для сайтов

Стандартные шрифты

Стандартные шрифты — это набор шрифтов, устанавливаемый вместе с операционной системой. Поскольку операционные системы бывают разные, то и набор шрифтов у них разный. Перечень стандартных шрифтов разных версий Windows можно посмотреть, например, в статье Стандартные шрифты Windows, а перечень стандартных шрифтов Mac OS на странице Шрифты, поставляемые с Mac OS. Что касается Unix/Linux операционных систем то единый набор шрифтов у них отсутствует. Многие пользователи Linux используют набор шрифтов DejaVu, в частности на Ubuntu они установлены по умолчанию. Согласно статистике http://www.codestyle.org у многих Unix/Linux пользователей также установлены наборы шрифтов URW, Free и другие. Согласно этой же статистике, больше 60% пользователей Unix/Linux имеют на своем компьютере шрифты набора Core fonts for the Web, который до 2002 года был официально доступен для бесплатного скачивания на сайте Microsoft.

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

Это свойство специфицирует приоритетный список имен семейств шрифтов и/или названий родовых семейств. Согласно спецификации CSS2 есть два типа имен семейств шрифтов:

1. Имя семейства шрифтов по выбору. Например «Times new Roman», «Arial» и другие. Имена семейств шрифтов, содержащие пробелы, должны заключаться в кавычки. Если кавычки отсутствуют, любые символы пробела до и после имени шрифта игнорируются, а любая последовательность пробелов внутри имени шрифта конвертируется в одиночный пробел.
2. Родовое (общее) семейство. В спецификации определены следующие родовые семейства:
   • serif — шрифты с засечками на концах;
   • sans-serif — шрифты без засечек;
   • cursive — шрифты курсивного начертания;
   • fantasy — декоративные шрифты;
   • monospace — моноширинный шрифт(с буквами одинаковой ширины).

Имена родовых семейств являются ключевыми словами и не обязательно должны заключаться в кавычки.

Таким образом для дизайна берется стандартный шрифт из OS Windows, подбирается к нему похожий для Mac OS и Unix/Linux, задается общее семейство шрифтов и готово.

Но не все так просто. Покопаем детальнее.

Ресурсы для визуальной идентификации

Кроме автоматических идентификаторов, есть также ресурсы, позволяющие найти нужный кириллический шрифт онлайн, что называется, «на глаз». Принцип их работы состоит в следующем. Вы переходите на такой ресурс, вбиваете в специальное поле какое-либо русское слово (фразу), и просматриваете варианты надписей данной фразы на разных кириллических шрифтах. Сравниваете с оригиналом и находите точное совпадение.

Среди таких ресурсов отметим следующие:

Ссылка:	Описание:
Англоязычный ресурс, работающий и с кириллическими шрифтами. Ваше слово набирайте в поле «TYPE YOUR TEXT».
fontov.net	Популярный отечественный ресурс с большой базой шрифтов. Визуальная идентификация работает схожим образом с другими аналогами. Вводите нужную фразу в соответствующее поле на сайте, и нажимаете справа на «Ок». Сервис позволяет скачать понравившийся шрифт на ваш ПК.
Ещё один отечественный сервис с множеством бесплатных шрифтов. Поле для ввода вашей фразы находится справа.
fonts.by	Несмотря на обилие кириллических шрифтов, форма для ввода своего слова для поиска здесь отсутствует. Придётся искать среди шрифтов самостоятельно, с обилием затраченного времени.

Правила которые помогут вам выбрать нужный шрифт.

Комбинируйте шрифт с засечками и шрифт без засечек, чтобы создать контраст. Чем больше стили шрифтов не похожи друг на друга, тем больше у вас шансов создать удачную пару. Шрифты, которые слишком одинаково выглядят,  плохо смотрятся вместе. (Попробуйте совместить Helvetica и Univers, чтобы убедиться на примере, что это плохой вариант). Можно выбрать два шрифта с засечками или два без засечек для создания комбинации только в том случае, если они радикально отличаются друг от друга.

Избегайте выбора шрифтов из одной категории, например, рукописные шрифты или брусковые. (Шрифты Clarendon  и Rockwell смотрятся вместе не очень хорошо).

Определите каждому шрифту его задачу и придерживайтесь её.

Попробуйте шрифты из различных категорий, которые имеют одинаковую высоту строчных знаков и ширину глифов. (Например, Futura вместе с Times New Roman смотрятся плохо, потому что у них большая разница между х-высотой и шириной. )

Найдите какие-либо отношения между основными формами. Например, посмотрите на букву «О» в верхнем и нижнем регистре. Круглые и овальные буквы «О» не любят друг друга, поэтому их лучше не сочетать.

Сравните начертание шрифтов: оно должно быть разным. (Например, Didot и Rockwell выглядеть очень плохо вместе по многим причинам, но одна из главных — потому что они оба имеют жирное начертание).

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

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

Попробуйте сочетать шрифты из одного исторического периода. Это займет немного времени, но оно того стоит.

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

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

Учите классические шрифты. Распечатайте их и смотрите на них во время обеда. После того как вы выучите все популярные шрифты, подумайте о том, как комбинировать их с другими шрифтами

Так вы сможете быстрее и проще создавать различные пары.

Используйте контраст выразительных и нейтральных шрифтов. Если один шрифт обладает выразительным характером (например, жирным начертанием), сочетайте его с нейтральным шрифтом.

Найдите любую удачную комбинацию, созданную не вами, обратите внимание на то, что вам нравится и попробуйте понять, почему это работает.  Весь интернет в вашем распоряжении для этого исследования.

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

Используйте не больше 2 гарнитур. Это даст вам до 8 шрифтов для работы: нормальный, полужирный, курсив и полужирный курсив

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

Измените размер кегля. Сочетание шрифтов может не согласоваться, но если вы измените размер одного из шрифтов, всё станет на свои места.

Избегайте смешивания моноширинных шрифтов с пропорциональными шрифтами. Вы можете попробовать это сделать, но не говорите, что мы вас не предупреждали.

Не смешивайте настроение шрифтов. Беззаботный Gill Sans не захочет стоять рядом с деловым Didot, по крайней мере, смотреться вместе они будут плохо. Сочетайте два шрифта с одинаковым или похожим настроением.

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

Нарушайте правила. Найдите свой уникальный способ. Не бойтесь экспериментировать, но делайте это разумно!

lingojam.com – красивый шрифт для Instagram онлайн

Первый из ресурсов, о котором я хочу рассказать – это lingojam.com, являющий собой продвинутый генератор шрифтов с русскими буквами. В своей работе ресурс активно использует символы Юникод, потому вы можете скопировать и вставить полученный результат в ваше био и комментарии в Инстаграме. Несмотря на «латинизированный» акцент ресурса, он модифицирует и кириллические символы, позволяя выбрать вариант себе по душе.

Перейдите на lingojam.com, в левое поле «Text goes here» вставьте ваш текст. Справа отобразятся различные варианты его набора.

Найдите понравившийся, скопируйте его (пометьте и нажмите «Скопировать» или Ctrl+С). После чего перейдите в Инстаграм, и вставьте (Ctrl+V) в нужное место скопированный ранее текст.

Как сделать красивые шрифты для профиля в Инстаграме

Чтобы сделать красивый шрифт для шапки Инстаграма, нужно изменить описание профиля. Об этом подробно рассказываем на мастер-классе «Оформляем аккаунт в Инстаграм». Но сначала — сделать текст с красивым шрифтом с помощью телеграм-бота, сайта или приложения, о которых мы говорили выше. Далее – мини-инструкция по редактированию био.

1. Заходим в приложении на вкладку со своим аккаунтом и выбираем «Редактировать профиль».
2. Нажимаем «Биография» и вставляем скопированный текст с красивым шрифтом. Максимальная длина – 140 символов, можно ставить хештеги и упоминания других аккаунтов.
3. Красивым шрифтом можно написать имя пользователя. Максимальная длина – 30 символов.
4. Возвращаемся. Шрифты для профиля в Инстаграме изменились.

На последнем скриншоте шрифт увеличен для наглядности

Теги оформления текста

Вообще, все теги форматирования текста, которых на самом деле не очень много, условно делятся на теги структурного форматирования и теги оформления текста. С первыми из означенных вы только что познакомились. Это теги, которые позволяют создать структуру текста – определить его заголовки, абзацы и.т.д. Теперь перейдем к тегам оформления. К ним относятся те, которые позволяют придать тексту жирность, курсивность, подчеркивание, поменять гарнитуру, цвет и размер шрифта.

В любом серьезном текстовом редакторе текст можно сделать и жирным и курсивным и подчеркнутым; также можно комбинировать перечисленные свойства. Все это доступно и в HTML. Для этого в нем существуют следующие теги оформления текста:

<B>—контейнерный тег, придающий жирность тексту, заключенному в контейнер — </B>

<U> — контейнерный тег, позволяющий подчеркнуть текст, заключенный в контейнер — </U>

<I> — контейнерный тег, превращающий в курсив текст, заключенный в контейнер — </I>

Теги <b>, <i>, <u> применяются в HTML чаще всего. Чтобы их быстрее запомнить, предлагаю вам чаще писать на форумах…Взгляните на картинку ниже:

Кнопки B, I, U воздействуют на текст точно также, как и одноименные с ними теги…

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

А вот логические теги применяются в тех случаях, когда нужно акцентировать внимание поисковика на том или ином слове (фразе). Такой прием очень сильно помогает при раскрутке

Выделяя тегами логического форматирования ключевые слова, вы даете понять поисковой машине, что перед ней именно «ключевики». И когда пользователь наберет в строке поиска фразу, близкую к вашим «ключам», поисковик предложит вашу страничку, как один из результатов поиска.

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

<b>Жирный текст</b>

Аналогично создается курсив и подчеркивание. А теперь допустим, вы хотите создать курсивный подчеркнутый текст. Для этого нужно записать такой фрагмент кода:

<i><u>Курсивный подчеркнутый текст</u></i>

Создавая такие матрешкоподобные конструкции, когда один контейнер вложен в другой, следите за целостностью контейнеров: тег, который был открыт первым, должен закрываться последним; тег, открытый вторым, закрывается предпоследним (вторым с конца) и.т.д.

Теперь создадим жирный курсивный текст:

<b><i>Жирный курсивный текст</i></b>

И, напоследок, соорудим конструкцию из трех вложенных контейнеров — создадим жирный курсивный подчеркнутый текст:

<b><i><u>Жирный курсивный подчеркнутый текст</u></i></b>

Обязательно проверьте работоспособность всех этих примеров самостоятельно. А затем перейдем к главному из тегов оформления текста:

Типы веб-шрифтов и их поддержка браузерами

Все современные браузеры поддерживают использование определённых веб-шрифтов. Происходит это следующим образом: браузер пользователя загружает шрифт с указанного сервера и применяет его для отображения текущей страницы. В настоящее время существуют следующие виды веб-шрифтов:

• TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
• WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
• WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
• SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
• EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

Формат шрифта	Chrome	Firefox	Opera	Safari	IExplorer	Edge
TTF/OTF (True Type и Open Type Fonts)	4.0	3.5	10.0	3.1	9.0*	12.0
WOFF (Web Open Font Format)	5.0	3.6	11.1	5.1	9.0	12.0
WOFF2 (Web Open Font Format 2)	36.0	39.0*	26.0	Нет	Нет	Нет
SVG (Scalable Vector Graphic)	4.0	Нет	9.0	3.2	Нет	Нет
EOT (Embedded Open Type)	Нет	Нет	Нет	Нет	6.0	12.0

Igfonts.io – кириллический шрифт с русскими буквами для Инстаграма

Функционал сервиса igfonts.io по своим возможностям похож на упомянутый нами выше lingojam.com. Он работает по тому же самому принципу, позволяя сначала набрать нужную фразу, а потом выбрать понравившийся вариант из предложенных сервисом модификаций. К чести данного сервиса он позволяет обрабатывать даже кириллические символы. Потому может быть использован нами, чтобы получить красивый русский шрифт для Инстаграма.

Запустите igfonts.io, в самой верхней форме введите нужную вам фразу кириллицей. Ниже отобразятся созданные сервисом результаты. Если их варианты вас не устроили, нажмите на кнопку «Load more fonts» в самом низу для загрузки очередной порции модификаций. Останется выбрать понравившийся результат, после чего скопировать его в данные вашего профиля (или ваши комментарии) в Instagram.

Где еще взять красивые символы

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

Таблица Юникода на Windows

Как найти таблицу с символами на Windows:

1. Нажимае на кнопку Windows или сразу на иконку с поиском.
2. Вводим фразу: «Таблица символов».
3. В открытом окне ищем символы и собираем из них текст.
4. Копируем.

Как найти таблицу с символами на MacOS:

1. Нажимаем правой кнопкой в любом месте, где есть строка ввода текста.
2. Выбираем пункт «Правка» и далее – «Специальные символы».
3. Вставляем нужный символ.

Важно: не все символы Юникода корректно отображаются в соцсети – придется проверять методом тыка

Межстрочный интервал

Помимо размера самих букв у текста есть параметр межстрочного интервала — это расстояние между нижними краями текста на каждой строке.

Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:

Интересно, что вся строка выше в целом бессмысленна, потому что она говорит браузеру «у текста абзацев должен быть стандартный размер и стандартный межстрочный интервал». На что браузер справедливо скажет: «Да я и так бы их сделал стандартными, не учи меня жить». 

Иногда мы используем нестандартные шрифты, в которых браузер не знает стандартного межстрочного интервала. Или он его знает, но нас этот интервал не устраивает. Тогда интервал можно задать во всех тех же единицах: пикселях, емах, процентах. 

Как распознать текст онлайн с помощью Whatfontis.com

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

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

Выполните следующее:

1. Перейдите на whatfontis.com;

2. Кликните на «Browse» для загрузки картинки со шрифтом на ресурс;

   Кликните на «Browse» для загрузки изображения со шрифтом на ресурс

3. После загрузки картинки сервис предложит вам помочь с идентификацией отдельных букв (достаточно 4-10 букв). Введите их правильные значения под каждой из предложенных букв ниже. Затем нажмите на «Continue»;
4. Просмотрите полученные результаты с возможностью сохранения нужно шрифта (кнопка «Download»).Сохраните нужный шрифт с помощью сервиса Whatfontis.com

«IdentiFont» сервис для поиска шрифта

Особенностью сервиса «IdentiFont» является возможность определить шрифт по наводящим вопросам, которые сервис вам задаст. При этом сайт использует англоязычный интерфейс, что существенно ограничивает возможности русскоязычного пользователя.

Данный сайт обладает пятью уникальными инструментами:

• «Fonts by Appearance» (идентификация шрифта по внешнему виду);
• «Fonts by Name» (определение шрифта по названию или части названия);
• «Fonts by Similarity» ( по схожести);
• «Fonts by Picture» (поиск почерка по картинке);
• «Fonts by Designer/Publisher» (по имени создателя или издателя).

Выбрав один из предложенных пяти инструментов вы сможете опознать нужный шрифт онлайн.

Рабочее окно сервиса «IdentiFont»

Англоязычный сервис для определения шрифтов Fontsquirrel.com

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

1. Для работы с ресурсом перейдите на fontspring.com.
2. И нажмите на кнопку «Upload Image» для загрузки картинки с нужным шрифтом на ресурс.
3. Разместите нужный вам текст с картинки в центре рамки и нажмите на кнопку «Matcherate It!» внизу (процедура de facto идентична вышеописанному ресурсу «FontSquirrel»).
4. Вы получите результат со списком найденных совпадений.

Рабочее окно сервиса «FONTSPRING»

Мобильные приложения с английскими буквами

При разборе различного инструментария, предлагающих получить красивый шрифт в Инстаграме с русскими буквами, нельзя не упомянуть и мобильные приложения для смартфонов на базе Андроид и iOS. В практически всех имеющихся популярных программах данного типа (например, «Fonts for Instagram», «Cool Fonts for Instagram», «Symbolizer fonts Keyboard», «Stylish Texts» и др.) обычно доступны лишь модифицированные латинские шрифты (в других случаях символы Юникод). Русскоязычные надписи или вовсе не отображаются, или отображаются в первоначальном варианте, без необходимых нам модификаций.

Потому рассматривать работу с данными приложениями стоит лишь в контексте модификаций текста, выполненного латиницей. Для русских букв и русского шрифта в Инстаграм такие приложения не пригодны.

Em — относительный размер шрифта

Если неохота считать проценты или нужно, чтобы шрифт точно был в 2 раза больше или в 0,7 раз меньше обычного шрифта, используют em. Это то же самое, что проценты: — это как .

Так же, как и с процентами, em — это относительные значения. Всё зависит от родительского элемента. В этом примере родительским элементом был общий размер для всей страницы, заданный в body{}. Но что, если мы вложим с помощью блоков абзацы друг в друга?

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

Em считается относительно текущего размера шрифта и пересчитывается при изменении размеров родительского шрифта. Это можно использовать для адаптивной вёрстки.

Кроме em есть ещё rem — она считает размеры шрифта только относительно тех, которые заданы в блоке стилей html{}. Если этого блока нет или в нём ничего не написано — rem посчитает размер шрифта от стандартного значения в браузере. Отличие от em в том, что даже при вложенности друг в друга все значения будут считаться не относительно предыдущего блока, а относительно значения в html{}.

Как подобрать подходящий шрифт.

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

Мы рассмотрим 4 варианта сочетаний разной насыщенности шрифта в заголовках и в тексте. Они помогут выразить тональность сайта, чтобы он выглядел гармонично и у вас получится хороший проект.

1. Полужирный заголовок и нормальный текст

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

Для каких сайтов подойдет: для любых.

Пример: Страница вакансии. В примере используются шрифты: Open Sans (для заголовков) и Roboto (для текста).

2. Жирный заголовок и нормальный текст

Тоже довольно распространенное, устойчивое сочетание. Рекомендуем его использовать, если вы хотите подчеркнуть, что ваш проект — это драйв и энергия.

Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.

Пример: Сайт коворкинга. В примере используются шрифты: Ubuntu (для заголовков) и PT Sans (для текста).

3. Жирный заголовок и тонкий текст

Более необычное сочетание, выглядит эффектно за счет контраста. Уместно в случае, когда вам нужно сочетать и драйв, и стиль

Пример: Страница дизайн-студии. В примере используются шрифты: Noto Sans (для заголовков) и Open Sans (для текста).

4. Тонкий заголовок и тонкий текст

Сочетание для проектов, связанных с высокими технологиями, чем-то прогрессивным и современным. Либо эстетичным и стильным. Особенно хорошо сработает, если у вас много белого пространства и есть небольшие акценты ярких цветов. И красивые фотографии.

Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.

Пример: Лэндинг мобильного приложения для обработки фотографий.

Критическое FOFT с preload

Этот вариант подхода критического FOFT просто изменяет механизм, с помощью которого изменяет механизм загрузки первого этапа. Вместо того, чтобы начать загрузку, используя обычный API JavaScript загрузки шрифтов, мы используем новый стандарт , о котором уже сказано выше. Это должно вызвать загрузку ещё быстрее, чем было возможно раньше.

• Демо: Критическое FOFT с preload (включает трюк с sessionStorage для оптимизации повторных просмотров)
• Подробнее: читайте раздел

Плюсы

• Все существующие плюсы подхода
• Скорость отрисовки: загрузки должны вызываться на более ранних этапах загрузки страницы, чем у предыдущих методов. Подозреваю, что это ещё разительнее с HTTP-заголовками, но пока не могу подтвердить. Этот метод лучше , поскольку использует кэш браузера для повторных запросов, а не запрашивает повторно те же данные веб-шрифта с каждым запросом разметки с сервера.

Минусы

• Все существующие минусы подхода
• Используется только с одним форматом шрифта
• Как указывалось выше, — только Blink на июль 2016.
• может немного задержать первоначальное отображение (заметьте, что эти данные были собраны с сайта, который использовал минимально необходимый CSS).
• Свой хостинг: вероятно, требуется.

Критическое FOFT с помощью Data URI

Этот вариант подхода критического FOFT просто изменяет механизм, с помощью которого изменяет механизм загрузки первого этапа. Вместо того, чтобы начать загрузку, используя обычный АPI загрузки шрифтов в JavaScript шрифтов, мы просто внедрили веб-шрифт как встроенный Data URI прямо в разметку. Как отмечалось ранее, это заблокирует первоначальное отображение, но поскольку мы встраиваем лишь малое подмножество простого шрифта, это ничтожная цена, чтобы в основном устранить FOUT.

• Демо: Критическое FOFT с помощью Data URI (включает трюк с sessionStorage для оптимизации повторных просмотров)
• Подробнее:

Плюсы

• Все существующие плюсы подхода
• Устраняет FOIT и существенно сокращает FOUT для обычного шрифта. Правда происходит небольшая перекомпоновка для дополнительных символов, загруженных на втором этапе, и во время загрузки других жирностей и стилей, но это будет не так заметно.

Минусы

• Все существующие минусы подхода
• Небольшой встроенный Data URI незначительно блокирует первоначальное отображение. Это малая цена за сильно уменьшенное FOUT.
• Свой хостинг: требуется