Online-учебник по CSS

Автор учебника: Евгений Андросов


Урок 5. Свойства и значения (шрифт)


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

  1. font family – семейство шрифтов

Существует три семейства, использующиеся для создания сайтов и понимаемые Интернет-браузерами:

  • serif (шрифты Times New Roman,  Garamond, Georgia),
  • sans-serif (шрифты Verdana, Arial, Trebuchet),
  • monospace (шрифты Courier, Courier New, Andele Mono).

Дело в том, что далеко не все шрифты отображаются в браузерах компьютеров посетителей вашего сайта. Для того, чтобы шрифт отображался, он должен быть установлен на каждом конкретном компьютере, а это практически нереально. Поэтому, если вы хотите, чтобы пользователи видели ваш сайт не так, как придется, а именно в том шрифте, какой вы ему задаете или близком к нему, всегда следует указывать варианты свойства "font-family", а также, для верности, название семейства шрифтов.
Пример:

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

Что это значит? Мы хотим, чтобы наш сайт отображался шрифтом Verdana. Если этого шрифта нет в компьютере пользователя, браузер ищет следующий похожий шрифт – Arial. Если и его нет, то подставляется любой имеющийся из семейства sans-serif – близкого по стилю шрифту Verdana.

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

p {font-family: "New Time Roman", Garamond, serif};


  1. font-weight – толщина шрифта

У этого свойства может быть только два значения: normal (нормальный) или bold (жирный). По умолчанию идет нормальный шрифт, его указывать не обязательно. Пример:

p {font-family: "New Time Roman", Garamond, serif; font-weight: bold};

  1. font-size – размер шрифта

Существует четыре единицы измерения размера шрифта: px, pt, %, em. Но в подавляющем большинстве случаев используются px – пиксели и em – относительные единицы. Пример:

h1 {font-size: 30px};
h1 {font-size: 2em}:

В браузере мы видим:

Заголовок, размер шрифта 30 пикселей

Заголовок, размер шрифта 2 em

  1. font-variant – свойство для выбора нормального вида шрифта (normal) или шрифта без заглавных букв – small-caps.

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

Пример:

p {font-variant: small-caps};


  1. font-style. Свойство имеет три значения: normal (по умолчанию), italic (курсив) и oblique (наклонный шрифт).

Курсив и наклонный шрифт, при всей их похожести – не одно и то же. Курсив имитирует рукописный текст, а наклонный образуется путем наклона букв нормального шрифта.
Пример:

h2 {font-family: Verdana, sans-serif; font-style: oblique;}

Так же как и в предыдущем уроке, когда мы рассматривали свойство "background", все значения свойства "font" следует писать в одну строчку через пробел. Пример:

h1 {font: italic bold 20px Verdana, sans-serif;}


Предыдущий урок    | К началу урока | К оглавлению |     Следующий урок




Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Андрей
Дата: 23.09.2010

Здравствуйте!Пытаюсь освоить флеш сайт, для облегчения скаал исходник флеш сайта в формате .fla, имеется хостинг и фтп менеджер. как сделать чтобы заработал сайт? плиз

Комментарий добавил(а): Евгений Андросов
Дата: 23.09.2010

Андрей! В двух словах этого не объяснить, так как исходник флеш-сайта - вещь, требующая серьезной доработки прежде, чем она станет сайтом. Как минимум вам нужно найти в онлайн или скачать несколько уроков или видео уроков по флеш, изучив которые вы сможете сделать эту работу. После того, как сайт будет готов, нужно приобрести доменное имя (обычно все хостинги предоставляют услугу регистрации доменных имен) и уже после того, как доменное имя будет зарегистрировано и домен размещен на вашем хостинге, выложить туда сайт, используя ftp-менеджер.

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.


Введите число, которое вы видите на картинке