Пятница, 2024 Декабрь 06, 02:15:50
5mw.ru
Приветствую Вас Гость | RSS
Главная Каталог статей Регистрация Вход
Меню сайта
заходите аналог или тут

Категории каталога
Мои статьи [842]
Уникальный материал
Секреты в контакте [23]
Секреты в контакте
Программы для контакта [15]
Программы для контакта
Секс [494]
sex

Мини-чат

Наш опрос
Зачем людям мозги???
Всего ответов: 38

Мы :)
[Добавь сайт](VIP)
Веб-браузер Opera

Это интересно

Наши баннеры

 

Главная » Статьи » Мои статьи

Урок 3: Шрифты в CSS

Урок 3: Шрифты в CSS


В этом уроке вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт, выбранный для web-сайта, может отображаться только в том случае, если этот шрифт установлен на PC, с которого выполняется доступ к этому web-сайту. Дано описание следующих CSS-свойств:

* font-family
* font-style
* font-variant
* font-weight
* font-size
* font


Семейство шрифта "font-family"

Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name
Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".
Generic family
Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

Разницу можно также проиллюстрировать так:



При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Необходимо в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты.

Список шрифтов может выглядеть так:


h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}


Заголовок первого уровня выведен шрифтом Arial


А заголовок второго уровня выведен шрифтом Times New Roman




Заголовки <h1> будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.

Стиль шрифта "font-style"

Свойство font-style определяет normal, italic или oblique. В примере все заголовки <h2> будут показаны курсивом italic.


h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}


Заголовок первого уровня выведен шрифтом Arial


А заголовок второго уровня выведен шрифтом Times New Roman - italic




Вариант шрифта "font-variant"

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Смотрите примеры:



Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}


Заголовок первого уровня выведен шрифтом Arial - Small Caps


А заголовок второго уровня выведен шрифтом Times New Roman - normal



Вес шрифта(толщина) "font-weight"

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.


p {font-family: arial, verdana, sans-serif;}
p {font-family: arial, verdana, sans-serif; font-weight: bold;}


Параграф выведен шрифтом Arial - normal


Параграф выведен шрифтом Arial - bold



Размер шрифта "font-size"

Размер шрифта устанавливается свойством font-size.

Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном миникурсе мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:


h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}


Заголовок первого уровня размер 30px


Заголовок второго уровня размер 1cm


Заголовок третьего уровня размер 120%

Параграф выведен шрифтом Arial размер 1em




Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.

Сокращённая запись "font"

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

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

p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}


Используя сокращённую запись, код можно упростить:

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


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

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


Вы познакомились с некоторыми свойствами шрифтов. Помните, что одной из важных возможностей при использовании CSS является то, что вы можете изменить шрифт для всего web-сайта всего за несколько минут. CSS экономит время и облегчает вам жизнь
Категория: Мои статьи | Добавил: admin (2011 Июль 11) news
Просмотров: 434 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
 
Форма входа

Поиск

Друзья сайта

  • Наши партнеры
  • Рекомендуем посетить: заходим! :)

    Статистика
     
    Привет,Прохожий !
    02:15:50 || 2024 Декабрь 06
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0

    Интересная загагулина
    Ух ты..... Девушки красотки
    Следим за активностью друзей «В Контакте»
    Эстонское боевое искусство
    Первый в РуНете сервис предоставляющий бесплатный хостинг (free hosing) своим пользователям
    За гранью реальности
    У влюблённых женщин увеличивается грудь
    Отображение всех устройств, когда-либо подключаемых к системе
    Хостинг для PHP или CGI сайта без рекламы для некоммерческих проектов
    Подрастающему менеджеру
    ЗНАТЬ ВСЕ О СВОЕЙ ГРУДИ.
    Что такое графология?
    Как выбрать правильно глубинный вибратор?
    Как я попал на Мальдивы за 2000 рублей
    Как выбрать наручные часы
    Срочная печать визиток это просто
    Я люблю музыку
    Сварка труб пнд советы своими руками
    Программа для печати визиток: как выбрать лучшую
    Пригороды Ялты
    Как выбрать автокран
    Выбрал правильно кондиционер?

    Ваша реклама
    Здесь может находиться ваша реклама. Ссылка или банер. Обращаться в ICQ 310-481-985

    Copyright MyCorp © 2024