Как изменить шрифт с помощью css

Если весь текст на сайте написан одним шрифтом, он конечно же не очень читаем. Глаз ищет за что зацепиться и не находит. Вот посмотрите на эту картинку.

Шрифты

Здесь дважды написан один и тот же текст. Но если верхнюю часть хочется прочитать, то текст внизу сливается в одно серое пятно.

Вот именно для того, чтобы сделать тексты читабельнее и используются разнообразные стили шрифта.

Давайте их и разберем.

Стиль шрифта font-style

Определяет начертание шрифта:

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

Размер шрифта font-size

Размер шрифта можно задавать как в абсолютных величинах, скажем 20pt, так и в относительных с помощью процентов. Но так делают редко. Чаще всего используют задание размера шрифта с помощью зарезервированных слов.

Для фиксированного размера:

Для относительного размера:

Жирность шрифта font-weight

Свойство font-weight - определяет жирность шрифта. Насыщенность шрифта может быть задана с помощью зарезервированных слов:

Кроме этого жирность можно задавать числами в интервале от 100 до 900 с шагом 100.

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

Свойство font-family - указывает одно, два или три имени шрифта из библиотеки шрифтов.

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

Так например запись вида <p style="font-family: Times New Roman, Arial, Verdana;"> - будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то мифическим причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.

Если же браузер не найдёт в библиотеке шрифтов пользователя ни одного шрифта из указанных то он будет использовать тот шрифт который указан в его настройках "по умолчанию"

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

Например, если в файле  написать

то это означает, что если вдруг не окажется шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif - рубленых шрифтов.

 Преобразование букв в заглавные-уменьшенные

Свойство шрифта font-variant позволяет преобразовать все строчные буквы в заглавные и несколько уменьшенные, по сравнению с обычными.

Значения:

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

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

Ох, как длинно! Вы, наверное, заметили, что все свойства начинаются одинаково, со слова font. 

Оказывается, оно является базовым атрибутом. И мы можем все эти свойства записать в следующем виде: