Задача
ВОШ — эффект, возникающий при стилизации текста подключаемым шрифтом, не установленным на компьютере пользователя. Проявляется, когда подключаемый шрифт ещё не успел скачаться, и стилизуемый текст отображается следующим шрифтом из значения свойства
font-family
этого элемента. Такое переключение шрифтов также может повлиять на размеры элемента, если они зависят от размеров текста в нём.Эффект известен также как FOUT — так его назвал Пол Айриш.
При общих моментах, есть и особенности. Например, в Файрфоксе текст, который нужно будет отрисовать нестандартным шрифтом, в течение 3 секунд не отображается, в Хроме тоже есть подобная задержка. Если шрифт успеет скачаться за это время, текст отобразится сразу нужным шрифтом.
На эту тему здесь была такая статья. В ней последствия ВОШ рекомендовалось нивелировать грамотной игрой со шрифтами. К сожалению, иногда подключаются такие шрифты, которые слишком отличаются по характеристикам от стандартных.
Решение
Чтобы устранить ВОШ, я решил указывать шрифт в основном файле стилей при помощи
data:uri
, чтобы шрифт отображался сразу, вместе со страницей.Остаётся выбрать формат шрифта, понимаемый большинством браузеров посетителей и удобный для загрузки. Широту поддержки форматов подключаемых шрифтов можно узнать здесь.
Шрифты в
eot
наиболее лёгкие, но поддерживаются только ИЕ.Шрифты в
ttf
и svg
тяжелы, иногда — конечно, это зависит от шрифта — занимающие в два раза больше места, чем eot
и woff
. В моей ситуации я выбрал woff
, этот формат поддерживается большинством браузеров наших посетителей.Ещё есть браузеры, которые
woff
не понимают, поэтому указываются альтернативы для них.ИЕ версии 8 и старше не понимают шрифты в
woff
, им нужен eot
. В то же время, ИЕ8 не понимает файлы в data:uri
тяжелее 32КБ, а более старшие версии не воспринимают совсем никакие, поэтому в отдельном файле стилей для них можно просто указать ссылки на файлы шрифтов. Чтобы эти браузеры не загружали ненужное, подключение шрифта в woff
и в других форматах выделено в отдельный файл стилей и отделено условным комментарием.Также, есть мнение, что под Вин в Хроме
svg
-шрифты выглядят лучше других, но, мне кажется, это дело вкуса. Шрифт в этом формате лучше других сжимается при помощи gzip
, но не поддерживается Файрфоксами и ИЕ.Таким образом, подгружать шрифты можно при помощи следующего кода:
<!-- подключение файлов стилей -->
<!--[if lte IE 8]>
<link rel="stylesheet" href="fonts_ie.css" media="all">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="fonts.css" media="all">
<!--<![endif]-->
<link rel="stylesheet" href="main.css" media="all">
/* fonts_ie.css */
@font-face {
font-family: 'PT Sans Narrow';
font-style: italic;
font-weight: bold;
src: url('PTS76F_W.eot');
}
/* fonts.css */
@font-face {
font-family: 'PT Sans Narrow';
font-style: italic;
font-weight: bold;
font-variant: normal;
src: url('data:application/x-font-woff;base64,d09GRgABAAAA...aCw0AAA==') format('woff'),
url('PTN77F_W.svg#PTSans-NarrowBold') format('svg'),
url('PTN77F_W.ttf') format('truetype');
}
/* main.css */
body {
font-family: 'PT Sans Narrow', 'Arial Narrow', sans-serif;
font-style: italic;
}
При использовании этого способа ВОШ остаётся только в неподдерживающих
woff
-шрифты, планомерно теряющих пользователей браузерах, самый распространённый из которых на данный момент — ИЕ8.На этой странице шрифт подключен традиционно.
Здесь шрифт закодирован.
Эффект заметней на медленном соединении.
Особенности
Стоит осознать, что при использовании такой техники остаются браузеры, которые не понимают шрифты в
woff
, но которым придётся их загружать. Тут уже играет роль количество посетителей с такими браузерами и продуктивность их посещений. В моей ситуации оказалось, что лучше устранить ВОШ.Шрифт всё равно будет скачиваться, даже если установлен локально. Это сделано, чтобы предотвратить конфликты между начертаниями; будет скачиваться такое, какое нужно.
Страница не будет отрисовываться, пока файл стилей со шрифтом не скачается.
Также отмечу, что способ не подойдёт для шрифтов с лицензией, не позволяющей загружать их при помощи
data:uri
.И, конечно, гарантированное решение всех проблем с подгружаемыми шрифтами — отказаться от их использования. Серьёзно, иногда они ни к чему.
Дополнительная информация
Отличная отправная точка для изучения темы подключаемых шрифтов
Если нужно подключить шрифт как обычно. Здесь же находится комментарий, который я заметил уже после того, как применил этот способ.
Немного об особенностях подключения.