Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Сентябрь 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

 

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «Шрифты».

 

Сегодня мы будем учится управлять шрифтом при помощи CSS. Давайте рассмотрим пример:

 

<HTML>
<HEAD>
<TITLE>Урок 13. Управление шрифтами в CSS</TITLE>
</HEAD>
    <STYLE TYPE="text/css">
    <!--
    .class1 {
    font-family:serif;
    }
    .class2 {
    font-family:sans-serif;
    }
    -->
    </STYLE>
<BODY>

<P class="class1">Этот абзац оформлен серифным шрифтом (с засечками)</P>
<P class="class2">А этот шрифтом без засечек</P>


</BODY>
</HTML>

 

Результат работы примера:

 

 

Как видим, правило font-family задает тип шрифта. Можно указать конкретный шрифт, например Times New Roman или Arial. На самом деле может быть так, что указанного шрифта в системе не будет (мы же на знаем, какие шрифты установлены на компьютере посетителя нашего сайта). Для того, что бы выйти из этого положения, можно указать шрифты через запятую. В этом случае, не найдя первый, система использует второй и так далее. А можно задать и так, как указано в примере, через семейство шрифтов.

Существуют следующие семейства шрифтов:

  • Serif.  Шрифт с засечками.

  • Sans-serif. Шрифт без засечек.

  • Monospace. Моноширинный шрифт.

  • Cursive. Курсивный шрифт.

  • Fantasy. Декоративный шрифт.

 

Следующее свойство font-weight - ширина линий шрифтов. Может быть 100, 200, 300, 400 для обычного шрифта и 500, 600, 700, 800, 900 для жирного шрифта. Но на самом деле различия между шрифтами с разным размером линий слабо заметно. Посмотрите сами на примере:

 

<HTML>
<HEAD>
<TITLE>Урок 13. Управление шрифтами в CSS</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
 .class1 {
font-weight:100;
}
 .class2 {
font-weight:200;
}
 .class3 {
font-weight:300;
}
 .class4 {
font-weight:400;
}
 .class5 {
font-weight:500;
}
 .class6 {
font-weight:600;
}
 .class7 {
font-weight:700;
}
 .class8 {
font-weight:800;
}
 .class9 {
font-weight:900;
}
-->
</STYLE>
<BODY>

<P class="class1">Этот абзац оформлен шрифтом 100</P>
<P class="class2">Этот абзац оформлен шрифтом 200</P>
<P class="class3">Этот абзац оформлен шрифтом 300</P>
<P class="class4">Этот абзац оформлен шрифтом 400</P>
<P class="class5">Этот абзац оформлен шрифтом 500</P>
<P class="class6">Этот абзац оформлен шрифтом 600</P>
<P class="class7">Этот абзац оформлен шрифтом 700</P>
<P class="class8">Этот абзац оформлен шрифтом 800</P>
<P class="class9">Этот абзац оформлен шрифтом 900</P>

</BODY>
</HTML>

 

 

Свойство font-style задает стиль шрифта. Допускаются значения normal - обычный шрифт, oblique - наклонный, italic - курсивный. Возникает вопрос: "В чем отличие курсивного шрифта от наклонного?". Суть в том, что italic использует встроенное в шрифт курсивное начертание. Как правило, в шрифт включены буквы типа normal, italic и bold. Если в шрифт не входят наборы bold и italic, то жирность достигается просто утолщением линий, а курсив - наклоном (oblique).

 

Для того, что бы задать размер шрифта, используется свойство font-size.

Пример:

<HTML>
<HEAD>
<TITLE>Урок 13. Управление шрифтами в CSS</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
.class1 {
font-size:16 pt;
}
.class2 {
font-size:12 pt;
}
-->
</STYLE>
<BODY>

<P class="class1">Этот абзац оформлен шрифтом размер 16</P>
<P class="class2">Этот абзац оформлен шрифтом размер 12</P>

</BODY>
</HTML>

 

 

 

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное