Академия: Курс Сodecademy - Learn HTML & CSS - Стилизация с помощью CSS (Шрифты)
![](https://img.golos.io/proxy/https://s26.postimg.org/872b2258p/html-css.jpg)
В данном уроке будут продолжаться разбираться методы стилизации элементов с помощью CSS. Во второй части будут рассмотрены основные правила стилизации текста в CSS.
Бесспорно, цвета - это важная составляющая пользовательского интерфейса (UX), но и следует обратить внимание а то, что большая часть важной информации, которую пользователь видит на веб-странице, будет отображаться в виде текста.
В этой части урока мы узнаем все о шрифтах и о том, как стилизовать их внешний вид с помощью CSS.
![](https://img.golos.io/proxy/https://s26.postimg.org/4t6u39pxl/New-_Mind-_Map.jpg)
Семейство шрифта
font-family - устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.
h1 {
font-family: Garamond;
}
При настройке шрифтов на веб-странице следует учитывать следующие моменты:
- Чтобы не возникало проблем с отображением шрифта на веб-странице, он должен быть установлен на компьютере пользователя.
- По умолчанию шрифт для всех элементов HTML - Times New Roman.
- Рекомендуется ограничить количество шрифтов, используемых на веб-странице, до 2 или 3.
- Если имя шрифта состоит из нескольких слов, оно должно быть заключено в двойные кавычки (иначе оно не будет распознано), например:
h1 {
font-family: "Courier New";
}
Шрифты с засечками и без засечек
![](https://img.golos.io/proxy/https://s26.postimg.org/g57fxsdqh/fonts1.jpg)
- Serif - буквы в этих шрифтах содержат дополнительные засечки на концах. Среди примеров такие шрифты, как Times New Roman, Georgia и другие.
- Sans-Serif - буквы в этих шрифтах не содержат дополнительных засечек на концах. Вместо этого они имеют прямые и плоские края. Среди примеров такие шрифты, как Arial, Helvetica и другие.
Резервные шрифты
Когда в CSS указывается шрифт, не установленный на компьютере пользователя, нам предварительно необходимо добавить резервные шрифты.
Чтобы использовать резервные шрифты, требуется следующий синтаксис:
h1 {
font-family: Garamond, Times, serif;
}
Дополнительные шрифты
Для этого в сети существуют специализированные ресурсы, например Google предлагает Google Fonts - каталог тысяч шрифтов с открытым исходным кодом, которые могут быть использованы любым пользователем.
Чтобы использовать эти шрифты, нам необходимо сослаться (указать) на определенный шрифт от Google в своем HTML-коде и сразу же применить его в CSS. Это позволяет избежать необходимости определять, установлен ли этот шрифт на компьютере пользователя.
Для того, чтобы привязать шрифт от Google, как и для таблицы стилей CSS, нам необходимо использовать тег <link>
.
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet" >
</head>
https://fonts.googleapis.com/css?family=Raleway
URL-адрес указывает шрифт Raleway из Google Fonts.
Теперь мы можем использовать новый шрифт так же, как и любой другой:
h1 {
font-family: Raleway, Georgia, serif;
}
Теперь у нас имеется доступ к тысячам новых, современных, бесплатных шрифтов!
Размер шрифта
p {
font-size: 18px;
}
В приведенном выше примере размер шрифта для всех абзацев был установлен в значение 18px.
![](https://img.golos.io/proxy/https://s26.postimg.org/qgvsdpqbt/New-_Mind-_Map_1.jpg)
Существуют три единицы измерения размера шрифта:
- px - представляет собой единицу пикселей. Дисплей монитора компьютера можно измерить в пикселях, которые представляет из себя небольшую точку на экране. Пиксели используются для установки точного размера элемента, в данном случае текста.
p {
font-size: 18px;
}
- em - относительная единица измерения. Определяет размер текста относительно размера текста родительского элемента.
p {
font-size: 1.3em;
}
- % - проценты также являются относительной единицей измерения. Размер текста по умолчанию в веб-браузерах - 16 пикселей. Когда используются проценты, они устанавливают размер текста относительно этого размера по умолчанию. Например, установка размера шрифта на 200% эквивалентна установке его на 32 пикселя.
p {
font-size: 150%;
}
Интервалы
Интервал между строками
line-height - устанавливает межстрочный интервал текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.
p {
line-height: 1.5em;
}
![](https://img.golos.io/proxy/https://s26.postimg.org/6a4cru1e1/fonts3.jpg)
Интервал между словами
Размер пространства между словами обычно равен 0.25em.
h1 {
word-spacing: 0.3em;
}
Практика изменения интервала между словами не является распространенной и применяется в основном для того, чтобы улучшить читаемость полужирного или увеличенного текста.
Интервал между буквами
h1 {
letter-spacing: 0.3em;
}
Насыщенность шрифта
p {
font-weight: bold;
}
Стиль шрифта
font-style - определяет начертание стиля шрифта - обычное, курсивное или наклонное.
h3 {
font-style: italic;
}
Трансформация текста
text-transform - управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен. Может принимать следующие значения:
- lowercase - все символы текста становятся строчными (нижний регистр).
- uppercase - все символы текста становятся прописными (верхний регистр).
h1 {
text-transform: uppercase;
}
Выравнивание текста
Для того, чтобы переместить или выровнять текст, в CSS применяется свойство text-align.
h1 {
text-align: right;
}
- left - выравнивание текста по левому краю.
- center - выравнивание текста по центру.
- right - выравнивание текста по правому краю.
Подводим итоги
Давайте посмотрим чему мы научились и что нового мы для себя узнали:
- Свойство CSS
font-family
изменяет шрифт текста. - Шрифты семейства
Serif
содержат дополнительные засечки на концах каждой буквы. - Шрифты семейства
Sans-Serif
таких засечек не содержат. - Резервные шрифты используются, когда определенный шрифт не установлен на компьютере пользователя.
- Google Fonts предоставляет бесплатные шрифты, которые можно подключить в HTML-файле с помощью элемента
<link>
. - Размер шрифта может быть задан в пикселях, em или процентах.
- Вертикальное расстояние между строками текста может быть изменено с помощью свойства межстрочного интервала
line-height
. - Горизонтальное расстояние между словами может быть изменено с помощью свойства
word-spacing
. - Интервал между буквами, может быть изменен с помощью свойства
letter-spacing
. - Текст может быть выделен жирным шрифтом с использованием свойства
font-weight
. - Текст может быть выделен курсивом с помощью свойства
font-style
. - Для отображения текста во всех строках прописным или строчным в CSS применяется свойство
text-transform
. - Текст можно выровнять с помощью свойства
text-align
.
Свое мнение и личные впечатления
На сайте также очень грамотно реализована возможность моментальной практики в виде всевозможных заданий после каждой части урока. Все это позволяет легко осваивать новый материал.
Предыдущие части курса Сodecademy - "Learn HTML & CSS"
4.1 Стилизация с помощью CSS (Цвета)
Конспект подготовлен для Академии Голоса @academy.