В этом видео я расскажу вам о свойствах, которые позволяют управлять начертанием или плотностью шрифта. Вообще у каждой гарнитуры есть характеристики рисунка, такие как наклон, насыщенность и плотность. Это все и есть начертание. Но прежде, чем начать рассказывать об этом, я хочу рассказать вам об одном особенном начертании. Это капитель. Капитель — это такое начертание, в котором строчные знаки выглядят как уменьшенные прописные. Установить ее можно с помощью свойства 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, но прежде, чем я начну о нем рассказывать, хотелось бы упомянуть о паре нюансов. А нюанс заключается в том, что в зависимости от подключенных к странице шрифтов, например, наклонного или жирного начертания вы можете увидеть не то, чего ожидаете. Например, на левой картинке в первой строчке буква «д» сильно отличается от буквы «д» во второй строчке, такая же проблема и во второй строчке. Почему это происходит? Все потому, что в первых строчках специальные подготовленные дизайнером гарнитуры, а во вторых строчках всего лишь доделки браузера. То есть браузер попытается наклонить или насытить обычное начертание используя для этого упрощенные алгоритмы, так как у него нет нужной гарнитуры. Для того, чтобы знать, как обходить и решать эту проблему, нужно знать, что такое семейство шрифтов, но об этом мы поговорим в следующем видео.
