Свойство font style: CSS font-style property – Свойство font-style | CSS справочник

Свойство font | CSS справочник

CSS свойства

Определение и применение

CSS свойство font устанавливает все свойства шрифта в одном объявлении.

Свойства, которые можно установить (в указанном порядке!):

  • font-style (стиль шрифта)
  • font-variant (капитель - малые заглавные)
  • font-weight (жирность шрифта)
  • font-size (размер шрифта) / line-height (задает расстояние между строками)
  • font-family (семейство шрифта элемента)

Значения font-size (размер шрифта) и font-family (шрифт элемента) являются обязательными. Если один из других значений отсутствуют, то будут установлены значения по умолчанию.

Поддержка браузерами

CSS синтаксис:

font:"font-style font-variant font-weight font-size / line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit";

JavaScript синтаксис:

object.style.font = "italic small-caps bold 12px/30px courier"

Значения свойства

ЗначениеОписание
font-styleЗадает стиль шрифта для элемента. Значение по умолчанию normal.
font-variantУказывает, должен ли текст быть выведен в капители (оставить без модификаций строчные буквы или установить строчные знаки как уменьшенные заглавные). Значение по умолчанию normal.
font-weightУстанавливает насколько жирным будет выглядеть текст в элементе. Значение по умолчанию normal.
font-size/line-heightЗадает размер шрифта элемента / задает расстояние между строками. Значение по умолчанию medium / normal.
font-family Задает шрифт для элемента. Значение по умолчанию зависит от браузера.
captionУстанавливает шрифт, который используется для заголовков элементов управления (например - кнопки).
iconУстанавливает шрифт, который используется для текста в иконках (значках).
menuУстанавливает шрифт, который используется в раскрывающихся меню.
message-boxУстанавливает шрифт, который используется в диалоговых окнах.
small-captionБолее мелкая версия шрифта, который устанавливается с помощью значения caption.
status-barУстанавливает шрифт, который используется в статус баре.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства font-weight.</title>
<style> 
.test {
font : italic small-caps bold 12px/30px courier;;
background-color : orange;
}
.test2 {font : caption;}
.test3 {font : icon;}
.test4 {font : menu;}
.test5 {font : message-box;}
.test6 {font : small-caption;}
.test7 {font : status-bar;}
</style>
</head>
	<body>
		<p class = "test">font: italic small-caps bold 12px/30px courier;background-color:orange;</p>
		<p class = "test2">font: caption;</p>
		<p class = "test3">font: icon;</p>
		<p class = "test4">font: menu;</p>
		<p class = "test5">font: message-box;</p>
		<p class = "test6">font: small-caption;</p>
		<p class = "test7">font: status-bar;</p>
	</body>
</html>
Пример использования универсального свойства CSS font.CSS свойства

CSS свойство font-style | назначение, допустимые значения, примеры

Свойство font-style задает стиль начертания шрифта.

Допустимые значения

  • normal — обычное начертание шрифта
  • italic — курсивное начертание
  • oblique — косой (наклонный) шрифт
  • inherit — наследует значение от родителя
Значение по умолчанию normal
Применимо ко всем элементам
Наследование да
Версия CSS CSS 1
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример

span {

font-style: italic;
}

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- span { font-style: italic; } --> </style> </head> <body> <p> В этом абзаце есть слово выделенное <span>курсивом</span>. </p> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

  • применение отображения курсивом или наклоном к шрифтам, в которых не заложена возможность такого начертания, может привести к неудовлетворительному результату (плохо- или вообще нечитаемому тексту)
  • многие браузеры отображают italic и oblique одинаково
Свойство font-variant Свойство font-stretch

CSS свойства шрифта Форматирование шрифта с помощью каскадных таблиц стилей

Для достойного отображения информации на Вашем блоге, или сайте, кроме владения CSS стилями текста, важное значение имеет правильный выбор нужного шрифта. Поэтому — знание

CSS свойств шрифтов , и успешное их применение на своём ресурсе, играет важное значение в борьбе за внимание посетителей.

Существует несколько основных свойств, которые и позволяют манипулировать шрифтами, придавая им нужный вид. Рассмотрим их:

  • Font-family — определяет семейство шрифта, для примения в тексте содержимого сайта.
  • Font-size — задаёт размеры шрифта веб-элемента.
  • Font-style — устанавливает стиль отображения шрифта — курсивное, наклонное или обычное.
  • Font-weight — задаёт насыщенность шрифта.
  • Font-variant — Определяет вид представления строчных букв — т.е. устанавливает, будут ли символы отображаться в уменьшенном размере, оставаясь при этом заглавными(прописными).
  • Font — и наконец универсальное свойство, позволяющее одновременно определять несколько параметров шрифта и текста.

Давайте рассмотрим каждое CSS свойство шрифтов более подробно, и с примерами.

Font-family

Как Вы знаете существует два основных вида шрифтов:

  • С засечками — serif: Times New Roman, Georgia, Bodon и др.;
  • Без засечек — sans-serif: Arial, Verdana, Helvetica, Tahoma, и др.;
  • Существуют и другие типы шрифтов — курсивные(cursive), декоративные(fantasy) и моноширинные(monospace), но их применяют редко.

Типы шрифтов задаются следующим образом: сначала, через запятую перечисляются выбранные Вами названия шрифтов(по убыванию приоритета), затем пишется тип шрифтов. Тип упоминают на случай полного отсутствия в браузере клиента шрифтов, указанных вначале.    Посмотрим пример:

<html>
<head>
<title>font-family</title>
<style type="text/css">
Div {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
P {
font-family: 'Times New Roman', Times, Georgia, serif;
}
</style>
</head>
<body>
<p>Текст — шрифт 'Times New Roman' из семейства «serif»</p>
<div>Текст — шрифт 'Verdana' из семейства «sans-serif»</div>
</body>
</html>
Результат в браузере:

Если Вы заметили, шрифт 'Times New Roman' написан внутри кавычек. Так пишется, если в названии шрифта больше одного слова и имеются пробелы.

Свойство Font-size

Наиболее часто размеры шрифта задаются при помощи единиц длины, принятых в CSS ( em, ex, pt, px, проценты (%) и др.). Однако можно задать размер шрифта в абсолютных (xx-small, x-small, small, medium, large, x-large, xx-large — данные единицы зависят от настроек шрифтов в ОС и браузере пользователя) или относительных (arger и smaller — зависят от родительского элемента) единицах. Из-за нечастого применения здесь мы их рассматривать не будем.
Определение размера шрифта зависит от настроек свойств родительского элемента. Применение отрицательных значений не допускается.
Рассмотрим для наглядности пример:

<html>
<head>
<title>font-size</title>
<style type="text/css">
h2 {
font-size: 200%;
}
P {
font-size: 13pt;
}
DIV {
font-size: 1.1em;
}
</style>
</head>
<body>
Размер шрифта по умолчанию<br>
<h2>Заголовок h2</h2>
<p>Размер шрифта текста 13pt (пунктов)</p>
<div>Размер шрифта текста 1.1em<br>(em — размер шрифта родительского элемента)</div>

</body>
</html>

Зависимость от установок «родителя» означает, что эти установки есть, их надо знать, и о них надо помнить.

Font-style

Свойство СSS для шрифтов Font-style определяет есть ли у шрифта наклон, и если есть — то какой. Существует три значения:

  • italic — курсивное написание текста, как бы иммитирующее рукописное исполнение.
  • oblique — наклонный шрифт, похож на курсив, но получен путём наклона обычного шрифта вправо.
  • normal — обычное начертание, используется по умолчанию.

Сразу перейдём к примерам использования данного свойства CSS.

<html>
<head>
<title>font-style</title>
<style type="text/css">
DIV {
font-style: italic;
}

P {
font-style: oblique;
}
</style>
</head>
<body>
Написано обычным шрифтом
<div>Написано курсивным шрифтом</div>
<p>Написано наклонным шрифтом</p>

</body>
</html>.


Как видно из рисунка — курсивное и наклонное начертание текста практически не отличимо. Веб-дизайнеры обычно используют курсив, для придания шрифту наклона. Закончим со шрифтами в следующем посте.

CSS свойство font

Универсальное свойство, позволяющее определить все свойства шрифта за одну декларацию.

Установить можно следующие свойства (в соответствующем порядке): "font-style font-variant font-weight font-size/line-height font-family".

Значения font-size и font-family обязательны. Если остальные значения не указываются, то будут использованы значения по умолчанию.

Свойство line-height устанавливает расстояние между строками.

CSS синтаксис

font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;

Возможные значения

Значение Описание
font-style Устанавливает стиль шрифта. Значение по умолчанию "normal".
font-variant Устанавливает способ представления строчных букв. Значение по умолчанию "normal".
font-weight Устанавливает "жирность" шрифта. Значение по умолчанию "normal".
font-size/line-height Устанавливает размер шрифта и расстояние между строк. Значение по умолчанию "normal".
font-family Устанавливает семейство шрифта. Значение по умолчанию зависит от браузера.
caption Шрифт для текста элементов форм вроде кнопок.
icon Шрифт для текста под иконками.
menu Шрифт применяемый в меню.
message-box Шрифт для диалоговых окон.
small-caption Шрифт для подписей к небольшим элементам управления.
status-bar Шрифт для строки состояния окон.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Определяем все свойства шрифта за одну декларацию


p.ex1 {
     font: 15px arial, sans-serif;
}

 p.ex2 {
     font: italic bold 12px/30px Georgia, serif;
}

Свойства css оформления шрифта

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

Свойства шрифта css

Перечислим основные свойства шрифта и их значения

font-family (семейство шрифта)

Возможные значения:

  • Serif (серифный шрифт с засечками)
  • Sans-serif (без засечек)
  • Monospace (моноширинный)
  • Название шрифта


Пример:

p{font-family:"Times New Roman", Times, serif;}
h5{font-family:Arial}

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}

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 */

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}

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}

элемент {font-style font-variant font-weight font-size line-height font-family}

Пример:

p{font:15px Arial,sans-serif}

p{font:15px Arial,sans-serif}

Обязательны свойства:
font-size и font-family

Отправить ответ

avatar
  Подписаться  
Уведомление о