arey1983

7 лет назад

Академия: Курс Сodecademy - Learn HTML & CSS - Стилизация с помощью CSS (Шрифты)

Всем доброго времени суток и хорошего настроения! Продолжаю изучать курс online-образовательного портала Сodecademy - "Learn HTML & CSS".

В данном уроке будут продолжаться разбираться методы стилизации элементов с помощью CSS. Во второй части будут рассмотрены основные правила стилизации текста в CSS.

Шрифты в CSS

В первой части урока мы познакомились с основными цветовыми форматами и способами их применения в CSS.

Бесспорно, цвета - это важная составляющая пользовательского интерфейса (UX), но и следует обратить внимание а то, что большая часть важной информации, которую пользователь видит на веб-странице, будет отображаться в виде текста.

В этой части урока мы узнаем все о шрифтах и о том, как стилизовать их внешний вид с помощью CSS.

Семейство шрифта

Чтобы изменить шрифт текста на веб-странице, нам нужно применить свойство font-family.

font-family - устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.

h1 {
font-family: Garamond;
}

В приведенном выше примере семейство шрифта для всех основных элементов заголовка установлено на Garamond.

При настройке шрифтов на веб-странице следует учитывать следующие моменты:

Чтобы не возникало проблем с отображением шрифта на веб-странице, он должен быть установлен на компьютере пользователя.
По умолчанию шрифт для всех элементов HTML - Times New Roman.
Рекомендуется ограничить количество шрифтов, используемых на веб-странице, до 2 или 3.
Если имя шрифта состоит из нескольких слов, оно должно быть заключено в двойные кавычки (иначе оно не будет распознано), например:

h1 {
font-family: "Courier New";
}

Шрифты с засечками и без засечек

Практика типографии существует уже много веков! Со временем типографы усовершенствовали свое ремесло и разработали много разных шрифтов. В CSS их можно классифицировать на шрифты с засечками - serif и шрифты без засечек - sans-serif.

Serif - буквы в этих шрифтах содержат дополнительные засечки на концах. Среди примеров такие шрифты, как Times New Roman, Georgia и другие.
Sans-Serif - буквы в этих шрифтах не содержат дополнительных засечек на концах. Вместо этого они имеют прямые и плоские края. Среди примеров такие шрифты, как Arial, Helvetica и другие.

Резервные шрифты

На большинстве компьютеров установлен небольшой набор шрифтов, который включает в себя шрифты с засечками и без засечек такие как такие как Times New Roman и Arial соответственно.

Когда в CSS указывается шрифт, не установленный на компьютере пользователя, нам предварительно необходимо добавить резервные шрифты.

Чтобы использовать резервные шрифты, требуется следующий синтаксис:

h1 {
font-family: Garamond, Times, serif;
}

В примере выше указано, что ко всем заголовкам h1 на веб-странице будет применен шрифт Garamond. Если этот шрифт недоступен, то будет применяться шрифт Times. Если оба этих шрифта недоступны, то используется любой, предварительно установленный на компьютере пользователя, шрифт из семейства serif. Шрифты, указанные после Garamond, являются резервными шрифтами.

Дополнительные шрифты

Постоянно разрабатываются и появляются новые виды шрифтов. Поэтому пользователю было бы не совсем логично устанавливать их все на свой компьютер.

Для этого в сети существуют специализированные ресурсы, например 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>

В приведенном выше примере атрибут href имеет следующий URL-адрес, который был получен из Google Fonts:

https://fonts.googleapis.com/css?family=Raleway

URL-адрес указывает шрифт Raleway из Google Fonts.

Теперь мы можем использовать новый шрифт так же, как и любой другой:

h1 {
font-family: Raleway, Georgia, serif;
}

Теперь у нас имеется доступ к тысячам новых, современных, бесплатных шрифтов!

Размер шрифта

Чтобы изменять размер текста на веб-страницах, в CSS применяется свойство font-size.

p {
font-size: 18px;
}

В приведенном выше примере размер шрифта для всех абзацев был установлен в значение 18px.

Существуют три единицы измерения размера шрифта:

px - представляет собой единицу пикселей. Дисплей монитора компьютера можно измерить в пикселях, которые представляет из себя небольшую точку на экране. Пиксели используются для установки точного размера элемента, в данном случае текста.

p {
font-size: 18px;
}

em - относительная единица измерения. Определяет размер текста относительно размера текста родительского элемента.

p {
font-size: 1.3em;
}

% - проценты также являются относительной единицей измерения. Размер текста по умолчанию в веб-браузерах - 16 пикселей. Когда используются проценты, они устанавливают размер текста относительно этого размера по умолчанию. Например, установка размера шрифта на 200% эквивалентна установке его на 32 пикселя.

p {
font-size: 150%;
}

Интервалы

Интервал между строками

Чтобы изменять интервал между строками текста в CSS применяется свойство line-height.

line-height - устанавливает межстрочный интервал текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.

p {
line-height: 1.5em;
}

Значение line-height в CSS можно изменять с использованием пикселей или em, но более предпочтительным является второй вариант.

Как видно из диаграммы выше, когда свойство line-height изменяется, значение ведущей (leading) увеличивается, что приводит к увеличению вертикального расстояния между строками текста.

Интервал между словами

Чтобы увеличить расстояние между словами в CSS применяется свойство word-spacing.

Размер пространства между словами обычно равен 0.25em.

h1 {
word-spacing: 0.3em;
}

В приведенном выше примере интервал между словами заголовка h1 устанавливается равным 0,3em.

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

Интервал между буквами

Чтобы увеличить расстояние между буквами в CSS применяется свойство letter-spacing.

h1 {
letter-spacing: 0.3em;
}

Значения расстояния между буквами - letter-spacing, как и со словами - word-spacing, в CSS предпочтительнее указывать в единицах - em.

Насыщенность шрифта

В CSS значение насыщенности шрифта изменяется свойством font-weight.

p {
font-weight: bold;
}

Насыщенность шрифта задаётся с помощью ключевых слов: bold - полужирное начертание, normal - нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.

Стиль шрифта

В CSS, для придания шрифту стиля начертания применяется свойство font-style.

font-style - определяет начертание стиля шрифта - обычное, курсивное или наклонное.

h3 {
font-style: italic;
}

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

Трансформация текста

Чтобы стилизовать отображение текста либо в верхнем, либо в нижнем регистре в CSS применяется свойство text-transform.

text-transform - управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен. Может принимать следующие значения:

lowercase - все символы текста становятся строчными (нижний регистр).
uppercase - все символы текста становятся прописными (верхний регистр).

h1 {
text-transform: uppercase;
}

Код в приведенном выше примере форматирует все элементы h1 для отображения в верхнем регистре.

Выравнивание текста

Независимо от того, какой из стилей применяется к тексту, он всегда отображается в левой части браузера.

Для того, чтобы переместить или выровнять текст, в CSS применяется свойство text-align.

h1 {
text-align: right;
}

text-align - определяет горизонтальное выравнивание текста в пределах элемента, может принимать следующие значения:

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"

1. Основы HTML

2. HTML-контент

3. Основы CSS

4.1 Стилизация с помощью CSS (Цвета)

Конспект подготовлен для Академии Голоса @academy.

Академия: Курс Сodecademy - Learn HTML &amp; CSS - Стилизация с помощью CSS (Шрифты)