Начертание шрифта

Loading...

Do curso por Moscow Institute of Physics and Technology

Основы HTML и CSS

105 classificações

Moscow Institute of Physics and Technology

Основы HTML и CSS

105 classificações

Curso 2 de 5 em Specialization Разработка интерфейсов: вёрстка и JavaScript

HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика. Вначале вы узнаете, как работать со шрифтами и текстом, а в конце концов научитесь верстать несложные страницы с анимацией и без. Авторы курса — разработчики из Яндекса. У курса есть продолжение.

Na lição

Шрифты и текст

Четвёртая неделя курса посвящена работе со шрифтами и текстом. Вы узнаете о проблемах, связанных с использованием нестандартных шрифтов, и способах их решения. Научитесь управлять выводом шрифтов, применять цвет для текста, а ещё создавать интересные эффекты с помощью тени. Узнаете, как реализовать многоколоночную развёртку, а также как грамотно обходить проблему переполнения текста. Полученных навыков вам хватит, чтобы сверстать собственную газету.

Что такое шрифт? Анатомия шрифта4:44

Размер шрифта4:02

Высота строки. Расстояние между буквами и словами3:42

Начертание шрифта3:08

Семейства шрифтов. Проблемы использования нестандартных шрифтов8:50

Свойство font1:11

Базовые свойства для работы с текстом6:53

Многоколоночность и переполнение текста4:11

Форматирование пробелов и переносов в тексте5:31

Псевдоэлементы2:10

Conheça os instrutores

Мохов Олег
разработчик интерфейсов, Яндекс
Артем Кувалдин
разработчик интерфейсов, Яндекс
Олег Семичев
разработчик интерфейсов, Яндекс

В этом видео я расскажу вам о свойствах,

которые позволяют управлять начертанием или плотностью шрифта.

Вообще у каждой гарнитуры есть характеристики рисунка,

такие как наклон, насыщенность и плотность.

Это все и есть начертание.

Но прежде, чем начать рассказывать об этом,

я хочу рассказать вам об одном особенном начертании.

Это капитель.

Капитель — это такое начертание,

в котором строчные знаки выглядят как уменьшенные прописные.

Установить ее можно с помощью свойства 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, но прежде, чем я начну о нем рассказывать,

хотелось бы упомянуть о паре нюансов.

А нюанс заключается в том,

что в зависимости от подключенных к странице шрифтов, например,

наклонного или жирного начертания вы можете увидеть не то, чего ожидаете.

Например, на левой картинке в первой строчке буква «д» сильно отличается от

буквы «д» во второй строчке, такая же проблема и во второй строчке.

Почему это происходит?

Все потому, что в первых строчках специальные подготовленные дизайнером

гарнитуры, а во вторых строчках всего лишь доделки браузера.

То есть браузер попытается наклонить или насытить обычное начертание используя для

этого упрощенные алгоритмы, так как у него нет нужной гарнитуры.

Для того, чтобы знать, как обходить и решать эту проблему, нужно знать,

что такое семейство шрифтов, но об этом мы поговорим в следующем видео.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play