Изменение шрифта

 В этой статье мы рассмотрим как изменить на нашем сайте шрифт, его размеры, цвет и величину отступа с помощью CSS. Как всегда, будем пользоваться консолью для просмотра элемента. Как пользоваться консолью (которая есть в каждом браузере) я писал здесь. Необходимость в коррекции параметров шрифта возникает при изменении дизайна сайта, его цветовой схемы, да и просто при «подгонке» под свой вкус. Рассмотрим несколько вариантов изменений.
 Выделяем текст, нажимаем правую клавишу мыши, выбираем: Исследовать элемент. В моём случае стили CSS шрифта имеют такой вид:
body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
 Допустим, я решил сделать текстовое поле более тёмным и сделать шрифт более нестандартным.
Шрифт. Первым делом изменим стиль шрифта. Для выбора стиля зайдём в текстовый или графический редактор и выберем тот, что нам понравится. Беру, к примеру, monotype corsiva. Ставлю его на первое место в строке font-family. Теперь эта строка выглядит так:
font-family: monotype corsiva "Helvetica Neue", Helvetica, Arial, sans-serif;
 Стиль шрифта изменился, теперь отрегулируем его размер. 


Размер шрифта. За размер шрифта отвечает правило font-size. Моя строка выглядит так: font-size: 13px; Но для шрифта monotype corsiva этот размер мал. Увеличим его до 20-ти пикселей. Правило приобретает такой вид: font-size: 20px; Это более подходящий размер для данного шрифта.
Но теперь строки находятся слишком близко. Увеличим межстрочное пространство.
Межстрочное пространство. За межстрочное пространство отвечает правило line-height. У меня оно выглядит так: line-height: 18px; Увеличим его до 21-го пикселя. Теперь правило выглядит так: line-height: 21px;
 Выше я писал, что хочу сделать текстовое поле более тёмным. Значит текст будет плохо виден. Изменим цвет текста.
Цвет текста. За цвет текста отвечает правило color. У меня оно имеет такой вид color: #333; Я изменю его на более светлый. Допустим: F4EFEF. Теперь правило выглядит так: color: #333;
 Собьём всё вместе:
body {
    margin: 0;
    font-family: monotype corsiva "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 21px;
    color: #F4EFEF;
 Сайт теперь выглядит так:


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