Всем привет, продолжаем рассматривать 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
