Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Разное → Свойства шрифтов

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

Давайте остановимся на самых основных свойствах шрифта, а также применим свои навыки на практике.

font-family - с помощью данного свойства мы определим семейство и гарнитуру нашего шрифта.

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

Если так получилось что не один шрифт из перечисленных не установлен на компьютере посетителя то он применит любой шрифт из семейства. Делается это для того чтобы сохранить дизайн страницы как изначально задумал дизайнер.

Семейства шрифтов

serif - шрифты из данного семейства Times New Roman, Times, Garamond; (шрифты с засечками)

sans-serif - шрифты без засечек Verdana, Arial, Helvetica;

cursive - курсивные шрифты;

fantasy - декоративные шрифты;

monospace - моноширинные шрифты.

Пополнив свой багаж знаний, преминем их на практике при оформлении например, абзаца:

p {font-family:Verdana, Arial, sans-serif;}


На странице текст заключается между тегами



<p>Текст оформленный шрифтом Verdana</p>


В этом случае браузер применит шрифт verdana для отображения текста в случае его отсутствия на

компьютере посетителя он применит шрифт Arial, а если и этот не будет найден то он возьмет

любой из семейства sans-serif;

Если шрифт в названии содержит пробелы его необходимо указывать в кавычках ""

p {font-family:"Times New Roman" serif}


Следующим свойством которое рассмотрим сегодня это будет font-size. Он задает размер шрифта на

странице.

Существует несколько способов установки размера шрифта.


Способ 1. устанавливаем размер шрифта с помощью значений xx-small, x-small, small, medium,

large, x-large, xx-large. величина шрифта зависит от браузера и установленной ос.

Способ 1 не рекомендуется если необходимо сохранить первоначальный дизайн страницы.

существует еще пару значений при помощи которых можно установить размеры шрифта

smaller - шрифт будет меньше чем у родителя;

larger - шрифт будет больше чем у родителя.

проверим как будет работать

p { font-size:16px;}
.small {font-size: smaller;}
.big {font-size:larger;}

на странице напишим следующий код

<p>Это родительский текст размером 18 пикселей, <span class="small"> а это текст меньше чем

родительский,</span> дальше опять нормальный родительский текст и <span class="big">  

начинается текст больше родительского</span> </p>


В вашем браузере это может выглядит примерно так

Свойства шрифтов

существует еще пару способов с помощью которых можно задать размер шрифта с помощью пикселей

(px), процентах (%) и пунктах (pt) и тп

font-style - определяет стиль вашего шрифта он имеет несколько значений, а именно

normal - обычны шрифт;

italic - курсивный шрифт;

oblique - наклонный шрифт.

надеюсь все знают разницу между курсивным и наклонным шрифтом. Курсив имитирует рукописный

шрифт, а наклонный получается с помощью наклона обычных символов.

задаем курсивный шрифт

p {font-style: italic;}


html выглядит так

<p>Курсивный шрифт</p>


если мы задаем стиль italic то на компьютере должен быть установлен этот вариант шрифта иначе

браузер будет имитировать наклонный текст.

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

normal - символы без изменений;

small-caps - будет выводиться маленькими прописными символами.

пример

p{font-variant: small-caps;}
.nor{font-variant: normal;}


html код

<p>Текст написанный заглавными символами <span class="nor">обычный текст</span></p>


результат

Свойства шрифтов


font-weight - свойство которое определяет насыщенность шрифта. имеет значения которое задаем

с помощью цифр от
100 до 900 (100, 200, 300, 400, 500, 600, 700, 800, 900.) самое светлое 100
темное 900.

в нашем распоряжении есть еще пару значений

bold - полужирное начертание насыщенность равна 700

lighter - насыщенность будет меньше чем у родителя;

bolder - насыщенность будет больше чем у родителя,

normal - нормальное начертание.

пример

p{font-weight:bold;}
span{font-weight:lighter;}
span.bol{font-weight: bolder;}


html код

<p>Текст с полужирным начертанием</p>
<p>Полужирное начертание - <span>текст с меньшей насыщенностью</span>
</p>Обычный текст - <span class="bol">текст с большей насыщенностью</span>


результат

Свойства шрифтов


наконец последнее свойство это свойство - font с его помощью мы можем задать сразу несколько свойств и объединить необходимые значения

пример

p{ font-family:Verdana, Arial, sans-serif;
font-weight:bold;
font-size:16px;
font-style:italic;}


сокращенная запись кода выше

p{font:italic bold 16px Verdana, Arial, sans-serif}


необходимо соблюдать определенную последовательность

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


Это было последнее свойство шрифта, на этом наш урок закончен.
Опубликовал dimas_ua, 12-11-2010, 00:00 Комментариев: 1
 (голосов: 1)
Пишет Faeton, 8 июля 2011 14:03
  • Сообщений: 0
  • Новостей: 0
Да уж… Жизнь – как вождение велосипеда. Чтобы сохранить равновесие, ты должен двигаться.