logo search
Vvedenie_v_Veb_programmirovanien_2 / Vvedenie_v_Veb_programmirovanien_2

Свойство шрифтов font позволяет задать одну или несколько характеристик шрифта: font-family| font-style | font-variant | font-weight| font-size

Свойство

Описание значения

font-family

Указыватся до трех шрифтов, через запятую: serif|san-serif |cursive |fantasy | monospace.

font-style

начертания: normal (по умолчанию), italic (курсив), oblique (наклонный).

font-variant

варианты начертания: normal (по умолчанию), small-caps (все буквы заглавные уменьшенного размера).

font-weight

жирность шрифта: normal , bold, bolder(жирный), lighter(бледный).

font-size

размер шрифта в абсолютных: (константы xx-small | x-small | small | medium | large | x-large | xx-large | {Абсолютный размер} или в относительных единицах или процентах: larger | smaller | {Отн. размер}%;

Например, вот описание свойств шрифта для <p>:

<head>

<style type="text/css">

p {

font-style: italic;

font-variant:normal;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

</style>

</head>

<body>

<p>Это текст, выведенный с указанными фонтами</p>

<body>

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

p { font: italic normal bold 30px arial, sans-serif; }

Порядок свойств font здесь таков:

font-style|font-variant|font-weight|font-size|font-family

Свойство font-family определяет название шрифта или семейства шрифтов для отображения документа. Обычно указывается несколько шрифтов, через запятые, чтобы выбрать из них тот шрифт, который установлен на компьютере клиента. Кроме названия может указываться гарнитура (семейство) шрифтов: serif(Times New Roman, Georgia); sans - serif(Arial, Verdana); monospace(моноширинные Courier, Courier New).

Пример:

<html>

<head>

<title>Установка шрифта с помощью стилей</title>

<style type="text/css">

body {

font-family: “Times New Roman”, times, serif;/* шрифты*/

font-size: 100%; /* Размер шрифта для основного текста */

font-style: oblique;}

th {

font-family: arial, sans-serif; /* Семейства шрифтов*/

font-size: 90%; /* Размер шрифта для заголовка таблицы */

font-weight: bold /* Полужирная насыщенность*/

}

h1, h2, h3 {

font-family: verdana, tahoma, arial, sans-serif /*шрифты*/

}

#cursive { font-style: italic} /* Курсивный текст */

</style>

</head>

<body>

<div id=”cursive”>Курсивный текст</div>

<h1>Заголовок1</h1>

<h2>Заголовок2</h2>

<h3>Заголовок3</h3>

<table>

<th>Таблица</th>

</table>

</html>

Результат:

Курсивный текст