0:00
В этом видео я расскажу вам о том,
как к web-технологиям относится наличие или отсутствие засечек на концах линий,
пропорции символов и все остальное, что связано с семействами шрифтов.
Вообще, стоит сказать, что классификация шрифтов в web выглядит примерно так.
Существуют рукописные шрифты, шрифты с засечками, без засечек,
декоративные и моноширинные.
Ниже вы можете заметить названия этих шрифтов из реального мира — так,
как они называются в типографике.
Все это и есть семейства.
В первую очередь хочется сказать о шрифтах в контексте ОС.
Вообще существуют безопасные и небезопасные шрифты.
Существует ряд шрифтов, который практически в каждой ОС присутствует.
Таким образом, их использование считается наиболее безопасным.
Такими являются, например: без засечек — шрифт Arial,
с засечками — Times New Roman и моноширинный — Courier New.
Эти шрифты есть на всех операционных системах,
и проблемы с подключением их к вашей странице не должно возникать.
Чтобы использовать нужный шрифт,
мы используем свойство font-family со значением названием этого шрифта.
Например, 'Arial'.
Можно кавычки опустить и записывать просто название шрифта,
а можно записывать несколько шрифтов через запятую.
Зачем это нужно?
Затем, чтобы если браузер не найдет Arial на компьютере пользователя,
он попробовал применить гельветику, если не найдет гельветику, то Calibri.
А что, если и третьего шрифта нет?
Тогда в 99 % случаев установится Times New Roman.
Это зависит от настроек браузера, но проблема в другом.
Проблема в том, что Arial, Helvetica и Calibri — это шрифты без засечек,
а Times New Roman — с засечками, поэтому мы можем увидеть наш сайт не так,
как хотелось бы.
Вот сейчас нам пригодится классификация, которую я озвучивал ранее.
Вот эти все названия можно использовать в свойстве font-family для того,
чтобы указать, какое семейство шрифтов установить в случае,
если не был найден ни один из перечисленных шрифтов.
Поэтому в нашем случае в конце нужно всего лишь добавить sans-serif.
Таким образом мы обойдем проблему.
Но есть такие шрифты,
которые вообще ни в одной операционной системе не присутствуют.
Что же делать с ними?
Нестандартные шрифты всегда можно подключить на страницу с помощью
at-правила @font-face.
Это правило всегда начинается с @.
В нем мы указываем свойство font-family, в котором пишем название своего шрифта,
которое будем сами использовать в своем коде, а также свойство source,
в котором указываем путь до файла шрифта.
WOFF — это один из самых распространенных форматов файлов шрифтов.
Далее мы просто указываем, например, для body, свойство font-family,
название нашего шрифта, а затем для пущей безопасности добавляем еще и семейство,
чтобы был fallback.
Также, если есть вероятность того, что один из ваших нестандартных шрифтов
установлен на пользовательский компьютер, то его можно указать через функцию local.
Так же в source вы пишете local и в скобках указываете название шрифта,
как оно указано в операционной системе.
Далее вы можете указать путь, который будет запасным,
если локально у пользователя этот шрифт не установлен.
А еще можно указать диапазон используемых в шрифте символов с помощью unicode-range.
В данном примере я выбрал все латинские символы,
для того чтобы файлик загружался чуть быстрее.
Но с этим, как всегда, есть нюансы.
local — весьма маловероятное развитие событий, так как редко пользователи,
особенно на мобильных устройствах, устанавливают себе какие-либо шрифты,
а unicode-range очень плохо поддерживается.
А также не обошлось и без больших проблем.
Во-первых, подключенный шрифт жирного начертания и, например, курсивного — это
два разных файла, и подключать их нужно отдельно, в отдельных @font-face.
Рассмотрим пример.
Первый @font-face подключает у нас жирное начертание шрифта,
мы указываем путь для этого файла с шрифтом и применяем его для тега header.
Затем мы подключаем новой записью @font-face уже курсивный
шрифт и применяем его для футера.
С этим есть некоторые проблемы.
Вам нужно запоминать названия этих шрифтов.
Мало того, что нужно запомнить название шрифта, но еще и нужно запомнить его
начертание, как bold, italic, condensed, expanded и так далее.
Но есть один маленький лайфхак, как сделать эту работу проще.
В @font-face можно указать font-style, font-weight, а возможно,
и font-stretch в будущем, чтобы просто указать,
какое начертание вы хотите применить к текущему семейству.
Например, я указал в font-family Sooo Good Font,
указал путь до обычного начертания и указал браузеру,
что font-style у этого начертания — нормальный, это обычное начертание.
Ниже я добавляю такой же @font-face с таким же названием шрифта и с
путем уже до другого файла шрифта.
Но указываю font-style italic.
Когда я в коде, например, у body, укажу этот шрифт,
то потом в футере, header — где угодно, я могу указать только font-style,
и он, унаследовав font-family, подключит нужное начертание,
и все будет выводиться правильно, а запоминать шрифты вам не придется.
Проблема номер один решена.
Во-вторых, как известно, раньше браузеры не особо хотели жить дружно.
Поэтому, чтобы подключить шрифт на страницу, приходилось использовать
аж четыре формата: svg, ttf, woff, eot, и выглядело это все примерно вот так.
Это еще оформлен код аккуратно и красиво, но тем не менее выглядит все
довольно громоздко и запоминать нужно немало записей.
Сейчас все куда лучше, но android-устройства версии 4.3 и
ниже не понимают формат woff, и для них еще нужно подключить формат ttf.
Как видите, все стало намного аккуратнее.
Но тем не менее представьте ситуацию: у меня есть шрифт формата woff.
Откуда мне взять формат ttf?
Вообще, идеальным решением данной проблемы является дизайнер, который должен
вам предоставить пакет шрифтов, который вы можете использовать во всех браузерах.
Но если такой возможности нет, то можно воспользоваться сервисами-генераторами,
которые помогают собрать весь пакет нужных форматов в несколько кликов.
Также они вам подготовят демки и создадут весь CSS-код.
Самый популярный из них — Font Squirrel.
А еще существуют сервисы, которые предоставляют шрифты, например,
Google Fonts.
Данные сервисы, они просто дают вам скопировать код,
который, подключив на страницу, поможет вам вывести шрифт.
Я думаю, что первый,
что второй сервис вы легко найдете в своей любимой поисковой системе.
На этом проблема номер два решена.
В-третьих, шрифты, как ранее было сказано — это всего лишь файлы,
а файлы нужно загружать.
Более того, когда шрифт загружен на страницу, он не применяется сразу.
С этого момента я бы хотел привести примерный алгоритм работы браузера с
шрифтами.
Первое.
Браузер получает и разбирает CSS.
Второе.
Встречает CSS в @font-face, но не скачивает файл шрифта.
Далее он разбирает CSS дальше и встречает указание шрифта в font-family где бы то
ни было.
Только с этого момента начинается загрузка шрифта.
И последним пунктом он загружает шрифт, разбирает его и применяет к странице.
Но что же пользователь видит, пока шрифт еще не применен?
Пользователь увидит примерно такую картину.
Данное поведение называется FOIT — flash of invisible text,
или вспышка невидимого текста.
Существуют также еще FOUT и FOFT,
но о них вы можете почитать по ссылке в дополнительных материалах к видео.
Вообще, хочется сказать, что веб не стоит на месте, и сейчас обсуждается свойство
fond-display, которое позволяет контролировать поведение шрифта,
подключенного в @font-face, но не примененного на странице.
Но главным выводом этого всего является то, что загрузка файла шрифта и
его отображение на странице — это дорогая операция.
И что же мы можем с этим сделать?
Вообще, я хочу привести небольшой список того, что возможно сделать,
не вдаваясь в подробности.
Первое — это запись шрифта напрямую в CSS в формате base64.
Такое работает для небольших шрифтов или, например, для одного символа,
как символ рубля.
Второе — это исключение ненужных символов, об этом мы говорили чуть ранее.
С помощью Font Squirrel можно выделить отдельные
диапазоны символов или только цифры или знаки препинания.
Архивация gzip со стороны сервера.
Любое другое кэширование с помощью настроек того же самого сервера.
Использование прогрессивного формата WOFF2, о котором, я надеюсь,
вы можете почитать сами.
Поднятие @font-face и его использования в font-family выше в коде,
чтобы браузер быстрее начал загрузку шрифта, чтобы быстрее его мог применить.
И многое другое.
На самом деле, я могу вам посоветовать статью от компании Google,
про шрифты и их оптимизацию, которая также будет в дополнительных материалах к видео.
На этом я считаю проблему номер три решенной.
Как оказалось, проблем немало, но каждая из них решается.
А также в данном видео вы узнали, что такое семейство шрифтов,
как с помощью CSS можно эти семейства использовать,
а также как подключить свой нестандартный шрифт на страницу.
В следующем видео мы подведем итоги всего того, что узнали о шрифтах и узнаем,
как управлять шрифтами одним свойством.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
