Содержание:
Свойства шрифта css
Перечислим основные свойства шрифта и их значения
font-family (семейство шрифта)
Возможные значения:
Serif(серифный шрифт с засечками)Sans-serif(без засечек)Monospace(моноширинный)Название шрифта
Пример:
p{font-family:"Times New Roman", Times, serif;} h5{font-family:Arial} |
Результат:
Это пример параграфа со свойством font-family. Это пример параграфа со свойством font-family. Это пример параграфа со свойством font-family со свойством font-family. Это пример параграфа со свойством font-family.
Это пример заголовка со свойством font-family
font-style (стиль шрифта)
Возможные значения:
normal(обычный текст)italic(курсив)oblique(наклонный текст)
Пример:
p.normal{font-style:normal} p.italic{font-style:italic} p.oblique{font-style:oblique} |
Результат:
Параграф со стилем normal
Параграф со стилем italic
Параграф со стилем oblique
font-size (размер шрифта)
Возможные значения:
px(обычный текст)em(16px=1em)- дополнительные:
xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger
Пример:
h5{font-size:40px} h6{font-size:1.875em} /* 30px/16=1.875em */ |
Результат:
Заголовок пятого уровня
Заголовок шестого уровня
1em соответствует размеру шрифта по умолчанию. Размер шрифта по умолчанию в браузерах устанавливается равным 16 пикселям.Получаем:
1em = 16px
Размер шрифта в em можно перевести из пикселей по формуле:
пиксели/16=em
font-weight (ширина линий шрифта)
Возможные значения:
normal(обычный шрифт)bold(«жирный»)bolder(«жирнее»)lighter(менее «жирный»)
Первые два значения — абсолютные значения. Вторые два — относительные (зависят от соседних или родительских элементов)
Пример:
p.normal{font-weight:normal} p.bold{font-weight:bold} |
Результат:
Параграф с классом normal
Параграф с классом bold
Краткая запись font
Свойства шрифта задаются в следующем порядке:
элемент {font-style font-variant font-weight font-size line-height font-family} |
Пример:
p{font:15px Arial,sans-serif} |
font-size и font-family