Але сьогодні все суперечки пішли в минуле. Зараз з'явилася нова практика - приховувати весь текст, до якого застосовано кастомниє шрифти до повного завантаження файлів шрифтів. Називається такий метод «Мерехтіння прихованого тексту» або МСТ. Цю техніку часто називають найгіршим із варіантів. Scott Jehl каже, що цей метод поганий як з точки зору продуктивності, так і юзабіліті:
«Як правило, найбільше проблем з МСТ буває в браузерах iOS Safari, які примудряються приховувати текст на 30 секунд і, врешті-решт, відображають його стандартним шрифтом. Схожий ефект, але з меншим часом затримки можна спостерігати в браузерах Chrome, Firefox і Opera. »
У довідці на сайті Typekit по цій проблемі йдеться схожим чином «Метод МНТ більш пристосований для моментального використання веб-сайту, особливо на повільних з'єднаннях». І як дизайнерам і розробникам нам необхідно вибрати щось одне, МНТ або МСТ.
Миготіння прихованого тексту
Файл шрифту починає завантажуватися
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Текст повністю невидимий, поки не завантажиться шрифт
Час тече повільно
Шрифт, нарешті, завантажується
Миготіння нестілізованного тексту
Файл шрифту починає завантажуватися
Текст відображається шрифтом, зазначеним в font-family
Фолбек замінюється за потрібне веб-шрифтом
Відмінності між цими двома методами просто колосальні. Scott також говорить, що з МСТ підходом текст на сайті Filament Group відображається через 2.7 секунди на 3G з'єднанні, а з МНТ через 0.6. Якщо перед нами стоїть завдання забезпечити максимальну швидкість інтерфейсу, то необхідно використовувати МНТ. Цей метод зосереджений на продуктивності мережі і забезпеченні позитивного користувацького досвіду.
Проблеми в методі МНТ
У даного методу, природно, є кілька недоліків. Наприклад, через сильні відмінностей у властивостях font-weight і x-height при зміні зі стандартного шрифту на призначений для користувача текст може стрибати або сильно поїхати. Тобто якщо компанія хоче використовувати для спілкування будь-якої свій брендовий шрифт, то з методом МНТ це стає нереальним.
Іноді такі недоліки можна згладити. Погляньте, наприклад, на сайт Bram Stein. Момент зміни стандартного шрифту на кастомний дуже швидкий, і форматування тексту майже не змінюється. Якщо ж ми не можемо підібрати схожий за розмірами стандартний шрифт, то доведеться скористатися SVG.
Розглянемо метод МНТ
Останнім часом я експериментував з завантажувачем Web Font Loader. Даний завантажувач дозволяє контролювати всі етапи відображення тексту в МНТ. Спершу, необхідно вставити код завантажувача в розмітку:
Скрипт завантажується асинхронно, тобто код можна додати прямо перед закриває тегом body або в head. Решта ресурси не будуть заблоковані. Даний метод не підтримується в IE9, але якщо це не настільки важливо, то можна замінити на:
Після підключення скрипта необхідно додати наш шрифт. У цьому побічному проекті я поекспериментував зі шрифтами через @ font-face з сайту Typonine. які додаються через link в header сайту:
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Preconnect тут дуже корисний, він автоматично робить мережеве рукостискання; перед запитом шрифту з нашого скрипта у нас вже є інформація, необхідна браузеру для завантаження відповідних ресурсів. Процес завантаження стає трохи швидше. (Спасибі Ilya Grigorik за підказку використовувати атрибут crossorigin). Тепер за допомогою об'єкта WebFontConfig можна почати перевіряти, завантажився чи наш шрифт чи ні:
Об'єкт custom каже Web Font Loader, що ми хочемо завантажити шрифти з зовнішніх стилів. В даному засобі завантаження, якщо нам знадобиться, можна скористатися шрифтами з сайтів Typekit, Google, Fontdeck і Fonts.com. У масиві families задаються все імена шрифтів, які будуть використовуватися в CSS font-family.
Ви могли помітити, що я встановив затримку timeout в 2 секунди. Це просто вигадане мною число. Я думаю двох секунд повинно вистачити на запит до мережі - навіть на повільних з'єднаннях, коли користувачам потрібен хоч якийсь контент. Після завантаження файлів шрифтів тегу html буде присвоєно клас:
Ці класи нам знадобляться, щоб задавати стилі в залежності від того, завантажилися чи шрифти чи ні. Існують і додаткові класи, які також можуть нам допомогти:
loading: додається, коли були запитані всі шрифти.
active: додається, коли шрифти відобразилися на сторінці.
Inactive: додається, коли браузер не підтримує задані шрифти або шрифти не можуть бути завантажені.
Fontloading: додається для кожного завантаженого шрифту.
fontactive: додається для кожного відображеного шрифту.
Fontinactive: додається якщо шрифт не може бути завантажений.
Тепер в стилях можна задати необхідне сімейство шрифтів в класі .wf-active:
Насамперед користувачі побачать шрифт із змінної $ fallback, але як тільки за допомогою Web Font Loader буде додано наш клас .wf-active, шрифти переключаться на наші. Тепер необхідно скористатися технікою прогресивного поліпшення.
Розбираємося з проблемами
Одна з проблем, яку я помітив, полягала в наступному. Після завантаження та застосування шрифту в рядках змінювалося кількість слів, а окремі елементи ставали або дуже широкими, або навпаки дуже вузькими. Щоб це виправити, можна встановити різні значення font-size і line-height для стандартних і кастомних шрифтів:
Мінімізуємо ефект миготіння нестілізованного тексту
Не забудьте поглянути на повний список доступних подій. За допомогою цієї події ми можемо швидко перевірити в шапці сайту, а чи існує даний ключ в sessionStorage. Якщо так, то тегу html моментально присвоюється відповідний клас:
Даний спосіб не здатний повністю прибрати миготіння тексту. Проблема буде актуально ще довгий час. Однак даний підхід значно покращує МСТ.
Для гарної типографіки завантаження шрифтів вкрай важлива
Редакція: Команда webformyself.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
