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

Tutos-web: обучение веб-технологиям. Шаг за шагом

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 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
Автор
VelRoss

Статистика

462 подписчиков
-3 за неделю
←   Все выпуски   →

Tutos-web: Выпуск #34 : Урок 6. Шрифты в CSS


Вместе с Вами данную рассылку читают 887 (+0) подписчиков*

Добро пожаловать в рассылку

Tutos-web !

 HTML {CSS} 15 апреля 2009 
Выпуск No

34

email: velross@list.ru
website : Tutos-web.Net.Ru
Ведёт рассылку : Velross

 

 

Тема выпуска : Урок 6. Шрифты в CSS

Сегодня в выпуске:

  1. Примеры. 1 часть  >>>
  2. Примеры. 2 часть  >>>
  3. Свойства шрифтов в CSS  >>>

 
 

На сайте также: этот урок с действующими примерами.

1. Примеры. 1 часть

Установите шрифт текста
Этот пример показывает, как вы можете установить нужный шрифт для текста.

 <html>
 <head>
 <style type="text/css">
 h3 {font-family: times}
 p {font-family: courier}
 p.sansserif {font-family: sans-serif}
 </style>
 </head>

 <body>
 <h3>Это заголовок 3</h3>
 <p>Это параграф</p>
 <p class="sansserif">Это параграф</p>
 </body>

 </html>

Использование значения "caption" в системных шрифтах
Такое значение шрифта, используется для заголовков элементов управления (кнопок, выпадающих меню и т.д.).

 <html>
 <body>

 <p>Это нормальный параграф</p>
 <p style=""font:" caption">Это параграф со шрифтовым значением  "caption"</p>

 </body>
 </html>

Установите размер шрифта
Этот пример показывает, как указать размер шрифта.

 <html>
 <head>
 <style type="text/css">
 h1 {font-size: 150%}
 h2 {font-size: 130%}
 p {font-size: 100%}
 </style>
 </head>

 <body>
 <h1>Это заголовок 1</h1>
 <h2>Это заголовок 2</h2>
 <p>Это параграф</p>
 </body>

 </html>

Задайте отношение ширины шрифта к его высоте
Если задано свойство font-size-adjust, то браузер рассчитывает размер шрифта следующим образом: определяет запрашиваемый аспект (то есть значение свойства font-size-adjust), умножает на размер шрифта и получает тот размер строчных букв (x-height), которые хотел получить web-дизайнер. После этого увеличивая ( или уменьшая) размер шрифта подгоняет реальный размер строчных букв под заданный web-дизайнером.

 <html>
 <head>
 <style type="text/css">
 h1 {font-size-adjust: 0.50}
 h2 {font-size-adjust: 0.40}
 p {font-size-adjust: 0.60}
 </style>
 </head>
 <body>

 <h1>Это заголовок 1</h1>
 <h2>Это заголовок 2</h2>
 <p>Это параграф</p>

 </body>
 </html>

1 | 2 | 3 | Наверх

2. Примеры. 2 часть

Установите стиль шрифта
Этот пример демонстрирует, как отобразить текст наклонно или в виде курсива.

 <html>
 <head>
 <style type="text/css">
 h1 {font-style: italic}
 h2 {font-style: normal}
 p {font-style: oblique}
 </style>
 </head>

 <body>
 <h1>Это заголовок 1</h1>
 <h2>Это заголовок 2</h2>
 <p>Это параграф</p>
 </body>

 </html>

Отобразите текст малыми прописными буквами
Этот пример демонстрирует, как использовать свойство font-variant.

 <html>
 <head>
 <style type="text/css">
 p.normal {font-variant: normal}
 p.small {font-variant: small-caps}
 </style>
 </head>

 <body>
 <p class="normal">Это параграф</p>
 <p class="small">Это параграф</p>
 </body>

 </html>

Установите толщину шрифта
Этот пример демонстрирует, как установить толщину шрифта.

 <html>
 <head>
 <style type="text/css">
 p.normal {font-weight: normal}
 p.thick {font-weight: bold}
 p.thicker {font-weight: 900}
 </style>
 </head>

 <body>
 <p class="normal">Это параграф</p>

 <p class="thick">Это параграф</p>

 <p class="thicker">Это параграф</p>
 </body>

 </html>

Все свойства шрифта в одной строке
Этот пример демонстрирует, как использовать сокращённую запись для установки всех свойств шрифта в одной строке.

 <html>
 <head>
 <style type="text/css">
 p
 {
 font: italic small-caps 900 12px arial
 }
 </style>
 </head>

 <body>
 <p>Это параграф</p>
 </body>

 </html>

1 | 2 | 3 | Наверх

3. Свойства шрифтов в CSS

В CSS свойствах шрифтов вы можете изменить шрифт, жирность (толщину), размер и стиль текста.

Примечание: В CSS1 все шрифты определяются по их названию. Если браузер не поддерживает указанный шрифт, то он будет использовать шрифт установленный как "по умолчанию".

Поддержка браузеров: IE: Internet Explorer, F: Firefox. Число - номер версии браузера, с которого осуществляется поддержка свойства.

W3C: число в столбце "W3C" указывает в какой рекомендации CSS (CSS1 или CSS2) было определено данное свойство.

Свойство Описание Значения IE F W3C
font Используется для сокращённой записи всех свойств шрифта font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar		 4 1 1
font-family Определяет семейства шрифта, используемого в этом тексте. Может быть несколько таких семейств, отделенные друг от друга запятыми. Приоритет определяется порядком в этом списке family-name
generic-family		 3 1 1
font-size Определяет высоту символов шрифта xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%		 3 1 1
font-size-adjust Позволяет задать отношение ширины шрифта к его высоте none
number		 - - 2
font-stretch Разряжает или уплотняет символы в текущем шрифте. normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded		 - - 2
font-style Определяет начертания шрифта, такие как курсив или наклонное normal
italic
oblique		 4 1 1
font-variant Отображение текста малыми прописными буквами или обычным шрифтом normal
small-caps		 4 1 1
font-weight Задаёт толщину выводимого шрифта normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900		 4 1 1


1 | 2 | 3 | Наверх

Помните Белого Рыцаря из сказки Льюиса Кэрролла "Алиса в стране чудес"?
Когда Алиса встретилась с ним, он был нагружен разнообразными "удобствами": ульем, чтобы ловить пчёл, мышеловкой от грызунов, браслетами от укусов акул на ногах у коня и даже блюдом для пудинга. Сгорбленный под грузом излишеств, Белый Рыцарь представляет собой превосходный символ для людей, которые ищут счастья в накоплении денег, вещей и недвижимости.

Ог Мондино , "Ключ к лучшей жизни ".

*Общее количество на 2-х рассылочных сервисах (Content.Mail.Ru и Subscribe.ru). 		 
  

tutos-web © 2008-2009

В избранное