Уроки HTML+CSS: Стили для текста (Часть 2)

Всем привет, продолжаем рассматривать CSS свойства для стилизации текста.

font-family – установка шрифта

Для того чтобы указать новый шрифт для текста прописываем свойство font-family с указанием названия шрифта и специальных параметров (начертание, стиль).

p {font-family: "Times New Roman", Georgia, Serif;}

Основные правила установки шрифтов:

• параметры и название шрифта перечисляются через запятую
• если название шрифта состоит из нескольких слов, то его необходимо заключить в кавычки.
• можно использовать стандартные шрифты, подключать сторонние или самописные файлы. Как правильно подключать шрифты, вы можете посмотреть в этой записи – http://prog-time.ru/kak-pomenyat-shrift-na-sajte-kak-ustanovit-svoj-shrift/

font-style – стили для начертания

normal	Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
italic	Выделяет текст курсивом.
oblique	Устанавливает наклонное начертание шрифта.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

p{font-style: italic;}

p{font-style: oblique;}

p{font-style: initial;}

font-variant – начертание шрифтов

normal	Значение по умолчанию, выводит текст обычным начертанием.
small-caps	Все строчные буквы заменяются на малые прописные, которые отличаются от обычных прописных слегка измененными пропорциями и уменьшенным размером. Очень похоже на text-transform: uppercase, отличие состоит в том, что здесь прописные буквы имеют разные размеры.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

p{font-variant: small-caps;}

font-weight – насыщенность шрифта

normal	Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
bold	Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
bolder	Насыщенность шрифта будет больше, чем у предка.
lighter	Насыщенность шрифта будет меньше, чем у предка.
100, 200, 300, 400, 500, 600, 700, 800, 900	Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

p{font-weight: bold;}

p{font-weight: bolder;}

p{font-weight: lighter;}

.p1{font-weight: 100;}
.p2{font-weight: 200;}
.p3{font-weight: 300;}
.p4{font-weight: 400;}
.p5{font-weight: 500;}
.p6{font-weight: 600;}
.p7{font-weight: 700;}
.p8{font-weight: 800;}
.p9{font-weight: 900;}
.p10{font-weight: 1000;}

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

absolute-size	xx-small, x-small, small, medium, large, x-large, xx-large. Абсолютные размеры определены относительно друг друга и коэффициент масштабирования между двумя соседними абсолютными размерами составляет примерно 1,5 при переходе от меньшего к большему и 0,66 при переходе от большего к меньшему. В качестве стандартного размера принимается medium.
relative-size	smaller, larger. Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для xx-small и xx-large.
длина	Размер шрифта устанавливается с помощью положительных значений единиц длины — px, как целых, так и дробных.
%	Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью em эквивалентно процентному значению.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

p{font-size: 40px;}

p{font-size: 50%;}

text-decoration-line

Свойство text-decoration-line указывает расположение линии относительно текста.

none	Значение по умолчанию
underline	Подчеркивание под текстом
overline	Подчеркивание над текстом
line-through	Добавляет линию перечеркивания
inherit	Наследует значение свойства от родительского элемента.
initial	Устанавливает значение свойства в значение по умолчанию.

text-decoration-style

Свойство text-decoration-style указывает тип линии.

solid	Добавляет отрезок простой линии. Значение по умолчанию.
double	Две параллельные сплошные линии с небольшим промежутком между ними.
dotted	Последовательность круглых точек.
dashed	Последовательность прямоугольных штрихов.
wavy	Указывает на волнистую линию.
inherit	Наследует значение свойства от родительского элемента.
initial	Устанавливает значение свойства в значение по умолчанию.

text-decoration-color

Свойство text-decoration-color задает цвет для линии подчеркивания. Цвет задается в виде стандартного кода.

text-shadow

Свойство text-shadow задает тень для текста. Значение для данного свойства формируется подобно значению для свойства box-shadow.

text-shadow: 2px 3px 5px #3498db;

Информация была взята с сайта – https://html5book.ru