CSS урок 7. Основные стили CSS: свойства шрифта

Цель урока: Знакомство со свойствами шрифта css

Свойства шрифта 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

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*


Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить