Свойство 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-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

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

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

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

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

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

Версия CSS

Наследуется

Анимируемое

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

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

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

Пример

Твой код:

Результат:

Заметки

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

Font-family

Свойство Font-size

Font-style

CSS свойство font

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

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

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

Это пример заголовка со свойством font-family

font-style (стиль шрифта)

font-size (размер шрифта)

Заголовок пятого уровня

Заголовок шестого уровня

font-weight (ширина линий шрифта)

Краткая запись font

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

Рубрики