В этом видео я расскажу вам о свойствах,
которые позволяют управлять начертанием или плотностью шрифта.
Вообще у каждой гарнитуры есть характеристики рисунка,
такие как наклон, насыщенность и плотность.
Это все и есть начертание.
Но прежде, чем начать рассказывать об этом,
я хочу рассказать вам об одном особенном начертании.
Это капитель.
Капитель — это такое начертание,
в котором строчные знаки выглядят как уменьшенные прописные.
Установить ее можно с помощью свойства font-variant, у которого
есть два значения: normal (по умолчанию, обычный текст) и small-caps, капитель.
Как вы видите в правой колонке, особенно по буквам «а» и «е»,
текст там действительно набран маленькими прописными буквами.
Данный прием часто использовался в газетах и используется иногда сейчас на сайтах.
Наклоном гарнитуры шрифта можно управлять с помощью CSS-свойства font-style.
Как вы видите он принимает три значения: normal, oblique или italic.
Normal — это обычный текст или прямые буквы.
Oblique — это наклонные буквы и italic — это курсивные буквы.
Разницу между вторым и третьим вариантами я объясню чуть позже.
А пока перейдем к насыщенности.
Чтобы управлять насыщенностью шрифта в CSS предусмотрено свойство font-weight.
С такими значениями как normal, bold и light.
Normal — это обычные светлые буквы.
Bold — это жирное начертание и light — это тонкое начертание.
Также можно установить значение числом от 100 до 900 с шагом 100.
В примере вы можете увидеть соответствие названий и чисел.
Также есть еще два значения, относительных значения — lighter и bolder.
Lighter делает шрифт тоньше шрифта родителя на
300 и bolder делает шрифт толще шрифта родителя на 300.
Данное значение зависит от браузеров и их настроек,
поэтому я не рекомендую вам их использовать.
Следующая характеристика гарнитуры шрифта — это плотность.
Для того, чтобы управлять ею в CSS существует свойство font-stretch
со значениями, которые вы видите на экране.
От самого узкого до самого широкого начертания.
От condensed до expanded.
Стоит помнить, что данное свойство не поддерживается на данный момент в Safari,
а также совсем недавно появилось в Chrome.
И если нужен, например, узкий шрифт, то его нужно подключать отдельно.
Например, с помощью такой записи, либо такой,
если мы хотим подключить широкий шрифт.
Итак, мы подходим к свойству font-family, но прежде, чем я начну о нем рассказывать,
хотелось бы упомянуть о паре нюансов.
А нюанс заключается в том,
что в зависимости от подключенных к странице шрифтов, например,
наклонного или жирного начертания вы можете увидеть не то, чего ожидаете.
Например, на левой картинке в первой строчке буква «д» сильно отличается от
буквы «д» во второй строчке, такая же проблема и во второй строчке.
Почему это происходит?
Все потому, что в первых строчках специальные подготовленные дизайнером
гарнитуры, а во вторых строчках всего лишь доделки браузера.
То есть браузер попытается наклонить или насытить обычное начертание используя для
этого упрощенные алгоритмы, так как у него нет нужной гарнитуры.
Для того, чтобы знать, как обходить и решать эту проблему, нужно знать,
что такое семейство шрифтов, но об этом мы поговорим в следующем видео.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
