CSS/Шрифты и текст
Шрифт и текст в CSS имеют следующие свойства.
Шрифты
правитьfont-family
правитьСемейство шрифта
В этом свойстве через запятую перечисляются шрифты в порядке приоритета. Браузер будет использовать первый из списка. Если первый не будет найден, будет использоваться следующий и так далее. Если ни один не будет найден, тогда браузер применит шрифт по умолчанию. Если в имени шрифта есть пробелы, его необходимо заключать в одинарные или двойные кавычки.
После всех шрифтов необходимо добавить семейство шрифтов, из которого будет выбран подходящий шрифт, если требуемых шрифтов не окажется на компьютере.
Пример:
p {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Существуют 5 семейств шрифтов:
- serif — шрифты с засечками
- sans-serif — шрифты без засечек
- monospace — моноширинные
- cursive — курсивные
- fantasy — декоративные
Пример, как выглядят такие шрифты:
serif sans-serif monospace cursive fantasy
font-style
правитьСтиль шрифта
Существуют три значения этого свойства:
- normal — обычный (значение по умолчанию)
italic — курсив
- oblique — наклонный
Браузеры последний стиль обычно отображают как курсивный
font-variant
правитьВариант шрифта
- normal — обычный (значение по умолчанию)
- small-caps — капитель, то есть все строчные символы становятся уменьшенными заглавными
font-weight
правитьВес шрифта
Это свойство устанавливает вес (насыщенность) шрифта.
Возможные значения:
- 100
- 200
- 300
- 400 или normal (значение по умолчанию)
- 500
- 600
- 700 или bold
- 800
- 900
font-size
правитьРазмер шрифта
Возможные значения этого свойства:
- абсолютные константы: xx-small, x-small, small, medium (значение по умолчанию), large, x-large, xx-large
- относительные константы: smaller, larger
- абсолютные и относительные единицы измерения CSS
line-height
правитьМежстрочный интервал, часто применяется вместе с font-size
Возможные значения:
- normal — нормальное значение (по умолчанию)
- number — число (больше либо равно 0), на которое умножается текущий размер шрифта
- length — фиксированное значение в единицах измерения CSS
- % — проценты от текущего размера шрифта
font
правитьЭто сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании
Пример:
p {
font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif;
}
Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar
web-шрифты
правитьСвойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило @font-face
Шрифты бывают следующих типов:
- eot — embedded opentype (.eot)
- ttf — truetype (.ttf)
- otf — opentype (.ttf, .otf)
- svg — svg-шрифты (.svg, .svgz)
- woff — web open font format (.woff)
Текст
правитьtext-align
правитьВыравнивание текста
Возможные значения:
- left — по левому краю (значение по умолчанию)
- right — по правому краю
- center — по центру
- justify — по ширине
letter-spacing/word-spacing
правитьИнтервал между буквами/словами
- normal — нормальное значение (по умолчанию)
- length — значение в единицах измерения CSS (допускаются отрицательные значения)
text-decoration
правитьОформление текста
Возможные значения:
- underline — подчёркнутый текст
- overline — линия над текстом
- line-through — перечёркнутый текст
- blink — мигающий текст
- none — отмена всех эффектов (значение по умолчанию)
text-indent
правитьОтступ первой строки
- length — фиксированное значение в единицах измерения CSS (значение по умолчанию равно 0)
- % — проценты от ширины строки
text-transform
правитьТрансформация текста
Возможные значения:
- none — нет трансформации (значение по умолчанию)
- uppercase — преобразование всех строчных символов в заглавные
- lowercase — преобразование всех заглавных символов в строчные
- capitalize — преобразование первой буквы каждого слова в заглавную
vertical-align
правитьВыравнивание элемента по вертикали
Применяется только к строчным элементам и к ячейкам таблицы
Возможные значения для строчных элементов:
- baseline — по базовой линии (значение по умолчанию)
- sub — нижний индекс
- super — верхний индекс
- top — верх элемента выравнивается с самым высоким элементом строки
- text-top — верх элемента выравнивается с верхом шрифта родительского элемента
- middle — по середине
- bottom — по нижней части
- text-bottom — низ элемента выравнивается с низом шрифта родительского элемента
- проценты
- величины CSS
Для ячеек таблицы:
- baseline — содержимое ячейки по базовой линии (значение по умолчанию)
- top — по верхнему краю
- bottom — по нижнему краю
- middle — по середине ячейки таблицы
Для строчных элементов это свойство выравнивает сам элемент, а не его содержимое. Для ячеек таблицы — наоборот
white-space
правитьПробелы между словами
Возможные значения:
- normal — обычное поведение (значение по умолчанию)
- pre — пробелы и переносы учитываются
- nowrap — пробелы и переносы не учитываются
- pre-wrap — пробелы учитываются, текст переносится
- pre-line — пробелы не учитываются, текст переносится
text-shadow
правитьДобавление тени к тексту (CSS3)
Возможные значения:
- h-shadow — смещение тени по горизонтали
- v-shadow — смещение тени по вертикали
- blur — радиус размытия тени
- color — цвет тени
- none — нет тени (значение по умолчанию)
text-overflow
правитьВидимость текста, если он не влезает в ширину блока (CSS3)
Возможные значения:
- clip — текст обрезается по размеру блока (значение по умолчанию)
- ellipsis — текст обрезается с добавлением многоточия