Как задать шрифт в CSS
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как изменить внешний вид первой буквы с помощью CSS. В данной статье я бы хотел рассказать, как задать шрифт в CSS. По умолчанию, при открытии вашей тестовой страницы, вы можете увидеть стандартный шрифт "Times New Roman". Если вам он не нравится, то вы его можете заменить. Делается это с помощью свойства font-family. Сразу хочу отметить, что браузер ищет шрифты в операционной системе пользователя, и если вы на своём сайте используете какой-нибудь экзотический шрифт, то скорее всего ваш сайт будет некорректно отображаться на большинстве компьютеров пользователей. Как же узнать наверняка, какой шрифт поддерживается большинством операционных систем? На данном вы сможете найти список шрифтов, которые обязательно есть, как в операционной системе Windows, так и в Mac OS. Что удобно, здесь есть ещё начертание шрифтов, т.е. вы сразу можете посмотреть, как выглядит тот или иной шрифт. Поэтому можете смело брать любой из этих шрифтов и не бояться, что ваш сайт где-то криво отобразится. Давайте создадим простую html-страницу с двумя абзацами и изменим их шрифт:
<html> <head> <meta charset="utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p>Первый абзац данного текста</p> <p>Второй абзац данного текста</p> </body> </html>
В файле стилей style.css запишем следующие свойства для абзаца (тег p):
p {
font-family: Arial;
}
Обновив страницу, вы увидите, что шрифт изменился. Шрифты можно указывать через запятую, давайте запишем такую конструкцию:
p {
font-family: Arial, "Palatino Linotype";
}
В данном случае браузер, если не найдет в системе пользователя шрифт "Arial", будет искать шрифт "Palatino Linotype". Также хочу обратить ваше внимание: если название шрифта состоит из нескольких слов, то его нужно указывать в кавычках.
На сайте, о котором я писал выше, рядом с каждом шрифтом есть названия, такие как sans-serif, serif, monospace. Это так называемые семейства шрифтов. Каждый шрифт относится к какому-то семейству. Давайте запишем такую конструкцию:
p {
font-family: Arial, "Palatino Linotype", sans-serif;
}
В данном случае, если браузер не найдет в системе пользователя этих двух шрифтов, то попробует отобразить страницу любым шрифтом из семейства sans-serif.
Домашнее задание: создайте тестовую html-страницу и отобразите текст на ней шрифтом "Comic Sans MS". Учтите момент, что если такого шрифта нет, то использовать семейство шрифтов cursive.
В данной статье вы узнали, как задать шрифты в CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
