Урок 5. Шрифты

Это пятый урок изучения CSS. В этом уроке мы рассмотрим семейство шрифтов, как задать размер текста, стиль текста, а также как сделать его жирным.

Перед изучением CSS пройдите предыдущие уроки:

Теория и практика

Чтобы красиво оформить текст на странице, придать ему привлекательный вид, необходимо знать некоторые CSS свойства которые помогут сделать это.

font-family

Начнем с семейств шрифтов. Всего существует огромное количество видов шрифтов, но не все одинаково отображаются в разных браузерах и системах. Это зависит от того присутствует ли данный файл со шрифтами в системе(установлен ли он).

Рассмотрим CSS код:

1
2
3

p {
   font-family: comic sans ms, times new roman, verdana;
}

Лучше всего название шрифта писать в нижнем регистре. Тогда браузеры их лучше понимают. У вас наверное появился вопрос почему мы указали сразу несколько шрифтов. Это делается для того, чтобы если первый шрифт «comic sans ms» не установлен у пользователя на компьютере, тогда текст будет показан в «times new roman». Если и он не установлен, тогда он будет показан со шрифтом «verdana».

font-size

После того как мы выбрали шрифт, нам необходимо задать его размер. В CSS это делается с помощью свойства font-size. Размер в CSS может задаваться с помощью нескольких величин: пиксели(px), проценты(%), пункты(em) и ключевые слова(small, large, medium). Я рекомендую вам использовать пиксели, и т.к. бразуеры их хорошо масштабируют.

Рассмотрим CSS код:

1
2
3
4

p{
    font-family: comic sans ms, times new roman, verdana;
    font-size:16px;
}

font-style

Также в CSS текст можно делать курсивный и наклонный. Это делается с помощью свойства font-style. У данного свойства есть несколько значений:

Вот пример курсивного и наклонного текста(разница есть, но она не очень заметная).

font-weight

Еще одним из необходимых свойств при работе с текстом это — выделение текста жирным. За это отвечает свойство font-weight.

Пример CSS кода:

1
2
3
4
5
6

p{
    font-family: comic sans ms, times new roman, verdana;
    font-size:16px;
    font-style:italic;
    font-weight:bold;
}

Ниже можете посмотреть пример и скачать его:

Посмотреть примерСкачать

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

Больше практикуйтесь!