разделенных запятыми.
Название шрифта состоящее из нескольких слов берется в кавычки (апострофы)
Универсальные семейства шрифтов: serif — шрифты с засечками, типа Times; sans-serif — рубленные шрифты – например Arial; cursive — курсивные шрифты; fantasy — декоративные шрифты; monospace — моноширинные шрифты, ширина каждого символа в таком
семействе одинакова.

body {
font-family : serif, ′Times New Roman′, Times ;
}
h1, h2, h3 {
font - family : Verdana, Tahoma, sans-serif;
}

…

index.html

абсолютный размер (pt, mm, in, pc, cm)
- относительный размер (em, ex)
- значение (например 14px)
- проценты ( % )

При указании в относительных еденицах (%, em) за 100% берется размер шрифта родительского элемента.

body { font-size : 30px; }
.one { font-size:80%; }
.two { font-size:80%; color:red;}

80% от 30 px = 24 px

80% от 24 px = 19 px

files/02_font_size.html

index.html

oblique - наклонный шрифт.
Определяет начертание шрифта — обычное, курсивное или наклонное
Курсив - это специальный шрифт имитирующий рукописный
Наклонный образуется путем наклона обычных знаков вправо
h1 {
font-style : italic;
} .myclass {  
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}

index.html

100 ( 200, 300, 400, 500, 600, 700, 800, 900 )
Устанавливает насыщенность шрифта.

h1 { font-weight: normal } .myclass { 
color: maroon; /* Цвет текста */ font-weight: 600; /* Жирное начертание */ }

Заголовок

Текст параграфа

index.html

— делать их все прописными уменьшенного размера или оставить без изменений.
Такой способ изменения символов называется капителью.

h1 { 
font-variant: small-caps;
}

Заголовок

index.html

интервал) текста, отсчет ведется от базовой линии шрифта – в обе стороны.
normal - расстояние между строками вычисляется автоматически.
em
%
множитель

h1 {
 line-height: 60%;
}
p {
 line-height: 1.5;
}

index.html

font-weight]
font-size/line-height font-family;

.layer1 { 
font: 16px sans-serif;
}
h1 {
 font: 200% arial, sans-serif;
}
p.myclass span.sp {
font : italic normal bold 1em/1.2em Arial;
}

Тест в параграфе
Текст в теге span

index.html

p {
letter-spacing: 1em;
}

word-spacing: normal
значение
Устанавливает интервал между словами.
Например
.myclass {
word-spacing : 12px;
}

index.html

в пределах элемента.
Этот атрибут наследуется, поэтому может быть установлен для целого блока для воздействия на все вложенные в него элементы
Значение justify - выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю.
Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

index.html

(например, для элемента

...

)
При этом воздействия на все остальные строки не оказывается.
Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.
Например
.myclass {
text-indent : 30px;
}

index.html

text-bottom
text-top
top
px (em)
%
Выравнивает строчный элемент по вертикали относительно своего родителя или окружающего текста.
Это свойство работает для всех элементов как выравнивание строчных элементов.
Для элементов ... и ... выравнивается весь их контент.

Вертикальное выравнивание

vertical_align.html

Размер шрифта при этом не меняется.
super - элемент изображается как надстрочный, в виде верхнего
индекса. Размер шрифта остается прежним.
baseline - выравнивание текста по базовой линии
bottom - выравнивание текста по нижней части элемента
строки,расположенного ниже всех.
middle - выравнивание средней точки элемента по базовой линии
text-bottom - нижняя граница элемента выравнивается по самому
нижнему краю текущей строки.
text-top - верхняя граница элемента выравнивается по самому
высокому текстовому элементу текущей строки.
% - величина расчитывается от значения высоты линии этого
элемента line-height

vertical_align.html

символов
pre – аналог элемента

nowrap – запрет переноса символов в элементе на новую строку
index.html

хост клиента

Группа по разработке WebFonts
http://www.w3.org/Fonts/WG/
CSS Fonts Module Level 3
http://www.w3.org/TR/css3-fonts/
Посмотреть готовность модулей CSS можно здесь
http://www.w3.org/Style/CSS/current-work

в нескольких файловых форматах,
чтобы обеспечить поддержку всех браузеров.
2. Описать и создать связь с этим шрифтом в правиле @font-fасе .
3. Включить название шрифта в значение свойства font-family, так
же как мы делаем для системных шрифтов.

Пример блока @font-face
@font-face {
font-family: fontName1;
src: source;
font-weight: weight;
font-style: style;
}

src: url('../fonts/Gothic-webfont.eot1t?#iefix')
format('eot'),
url('../fonts/Gothic-webfont.woff1') format('woff'),
url('../fonts/Gothic-webfont.ttf') format('truetype'),
url('../fonts/Gothic-webfont.svg#webfontFHzvtkso')
format(svg);
font-weight: weight;
font-style: style;
}

Для IE нужно в добавить заголовок

чтобы он не работал в режиме обратной совместимости (compatibility mode)

Параграф с class="first" отформатировать
- начертание шрифта arial
- размер шрифта 14 px
- стиль шрифта italic

3. Параграф с class="second" отформатировать
- начертание шрифта tahoma
- вариант шрифта (font-variant) - small-caps
- в параграфе найти словосочетание “духовной линии” и
сделать его наклонным стилем - italic

4. В параграфе с class="formula" отформатировать значения в
тегах
result
2
так чтобы текст имел вид

Sresult = Ax2

HOME.html

Домашнее задание

сделать отступ первой строки 40px ( text-indent )
- найти Ипполита Матвеевича и задать в этом
выражении межсимвольное расстояние 3px ( letter-spacing )
- найти подстроку Сделал свое дело — и уходи и заключить ее
в кавычки-елочки (использовать html-entities « »)
Вид подстроки должен получиться таким
«Сделал свое дело — и уходи.»

7. Для параграфа с class="fourth" ="fourth"
- сделать межстрочный интервал 30px ( line-height )
- найти все словосочетания Ипполит Матвеевич и сделать их
полужирным курсивом
- каждое предложение текста расположить так чтобы оно
начиналось с новой строки