Модуль шрифтов CSS (уровень 3)
Вы можете легко менять шрифты текста.
Новые текстовые функции в CSS Fonts Module Level 3 API включают:
Свойства шрифта
Вы можете использовать свойства шрифта CSS, такие как
стиль шрифта
,вес шрифта
,вариант шрифта
,размер шрифта
исемейство шрифтов
, чтобы изменить внешний вид текста.
Для управления шрифтами с помощью свойств шрифта CSS:
Определите свойство
font-style
в элементев разделе
веб-страницы,чтобы применить различные стили шрифта:
<голова><стиль>p:nth-child (1) em{стиль шрифта:обычный}p:nth-child (2) em{стиль шрифта:курсив}p:nth-child (3) em{стиль шрифта:наклонный}стиль>голова><тело>
стиль шрифта:обычный
стиль шрифта:курсив
стиль шрифта:
тело>Определите свойство
font-weight
,которое управляет весом текста:<голова><стиль>p:nth-child(1){шрифт:обычный}p:nth-child (2){начертание шрифта:полужирный}p:nth-child(3){шрифт:300}p:nth-child(4){шрифт:500}p:nth-child(5){шрифт:700}стиль>голова><тело>
начертание шрифта:обычный
начертание шрифта:полужирный
толщина шрифта:300
начертание шрифта:500
толщина шрифта:700
тело>Определите свойство
font-variant
,чтобы изменить шрифт,например,на использование строчных заглавных букв:<голова><стиль>p:nth-child(1){вариант шрифта:обычный}p:nth-child(2){вариант шрифта:маленькие заглавные}стиль>голова><тело>
вариант шрифта:обычный
вариант шрифта:маленькие заглавные
тело>Определите
свойство font-size
,которое управляет размером шрифта:<голова><стиль>p:nth-child(1){размер шрифта:150%}p:nth-child(2){размер шрифта:1. 2em}стиль>голова><тело>
размер шрифта:150%
Размер шрифта:1,2em
тело>Определите свойство
line-height
,которое управляет высотой текстовой строки:<голова><стиль>p:nth-ребенок (1){высота строки:1}p:nth-ребенок (2){высота строки:1,5}p:nth-ребенок (3){высота строки:5}стиль>голова><тело>
высота строки:1
высота строки:1,5
высота строки:5
тело>Определите свойство
font-family
,которое назначает элементу определенный шрифт или его представитель. Порядок списка в пределах
определяет приоритет свойства.
Если назначенный шрифт не установлен на целевом устройстве,будет получен другой шрифт в зависимости от пользовательской системы.<голова><стиль>p:nth-child (1){семейство шрифтов:с засечками}p:nth-child(2){семейство шрифтов:без засечек}p:nth-child(3){семейство шрифтов:моноширинный}p:nth-child(4){семейство шрифтов:скоропись}p:nth-child(5){семейство шрифтов:фэнтези}p:nth-child(6){семейство шрифтов:'Arial Black',без засечек}p:nth-child(7){семейство шрифтов:Tahoma,без засечек}p:nth-child(8){семейство шрифтов:Verdana,без засечек}p:n-й ребенок (9){семейство шрифтов:Arial,без засечек}стиль>голова><тело>
семейство шрифтов:с засечками
семейство шрифтов:без засечек
семейство шрифтов:моноширинный
семейство шрифтов:cursive
семейство шрифтов:фантазиясемейство шрифтов:'Arial Black',без засечек
Семейство шрифтов:Tahoma,без засечек
Семейство шрифтов:Verdana,без засечек
Семейство шрифтов:Arial,без засечек
тело>