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

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

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

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

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

www.homa.xp3.biz 

В предыдущей главе мы рассмотрели свойства текста, в этой поговорим о том что можно сделать с шрифтом используя инструменты CSS.

Стиль шрифта

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

Шрифт может иметь следующие стили:

  • normal - обычный (по умолчанию);
  • italic - курсив;
  • oblique - наклонный.

    Пример:

    <title>Стиль шрифта</title>

    <p style=font-style:italic>это курсив

    <p style=font-style:oblique>а это наклонный текст

    <p style=font-style:normal>И чем спрашивается, они отличаются?

    смотреть пример

    Чем отличается курсив от наклонного текста? Курсив - это своего рода шрифт взятый из библиотеки шрифтов, а наклонный текст - это результат работы алгоритма, где каждый символ слегка наклоняется в правую сторону.

    Начертание шрифта

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

    Значения:

  • normal - нормальный (по умолчанию)
  • small-caps - все буквы заглавные и уменьшенные

    Пример:

    <title>Все буквы заглавные</title>

    <p style=font-variant:small-caps>Купи слона!

    смотреть пример

    Размер шрифта

    Свойство CSS font-size определяет размер шрифта.

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

    значения абсолютного размера шрифта:

  • xx-small - очень очень маленький;
  • x-small - очень маленький;
  • small - маленький;
  • medium - средний;
  • large - большой;
  • x-large - очень большой;
  • xx-large - очень очень большой.

    значения относительного размера шрифта:

  • larger - больше чем размер шрифта родительского элемента;
  • smaller - меньше чем размер шрифта родительского элемента.

    Пример:

    <title>Размер шрифта</title>

    <div style=font-size:18px;background:#ecf>

    <p>Размер шрифта родительского элемента (блока DIV) равен 18px.

    <p style=font-size:larger>Этот шрифт будет крупнее относительно элемента родителя.

    <p style=font-size:smaller>А этот шрифт будет мельче относительно элемента родителя.

    </div>

    <p style=font-size:8px>В блоке ниже размер штифта элемента родителя огромен (60 пунктов), однако дочерние параграфы расположенные в нём имеют собственное абсолютное значение шрифта и к размеру шрифта элемента родителя никак не привязаны.

    <div style=font-size:60pt;background:#ecf>

    <p style=font-size:xx-small>xx-small - очень очень маленький

    <p style=font-size:x-small>x-small - очень маленький

    <p style=font-size:small>small - маленький

    <p style=font-size:medium>medium - средний

    <p style=font-size:large>large - большой

    <p style=font-size:x-large>x-large - очень большой

    <p style=font-size:xx-large>xx-large - очень очень большой

    </div>

    смотреть пример

    Жирность шрифта

    Свойство font-weight определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:

  • normal - обычный шрифт;
  • bold - полужирный шрифт;
  • bolder - жирный шрифт;
  • lighter - тонкий шрифт.

    А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900) где значение 100 тонкий шрифт, а 900 - сверх жирный.

    Пример:

    <title>Жирность шрифта</title>

    <div style=font-size:18pt>

    <p style=font-weight:bolder>жирный шрифт

    <p style=font-weight:lighter>тонкий шрифт

    <p style=font-weight:600>жирность шрифта равна 600

    </div>

    смотреть пример

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

    Атрибут CSS font-family указывает 1, 2 или 3 имени шрифта из библиотеки шрифтов.

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

    Так например запись в стилевом описании P{font-family:Arial,Verdana} - будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Arial, а если его по каким-то причинам не окажется в его библиотеке шрифтов, то следует использовать шрифт Verdana.

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

    Можно указать браузеру не только какой-то конкретный шрифт, но и обозначить предпочтительное семейство шрифтов из перечисленных ниже возможных:

  • serif - шрифты с засечками;
  • sans-serif - рубленые шрифты;
  • cursive - курсивные шрифты;
  • fantasy - декоративные шрифты;
  • monospace - моношириные шрифты.

    Например, если в файле CSS написать p{font-family:arial,sans}, то это будет значить, что если вдруг не окажится шрифта arial, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans (рубленых шрифтов).

    Пример:

    <title>Семейство шрифта</title>

    <style>

    h3{font-family:verdana,sans}

    p{font-family:Monotype Corsiva, Verdana}

    span{font-family:Comic Sans MS}

    </style>

    <h3>Купи слона</h3>

    <p>У нас Вы можете по <span>выгодным ценам</span> приобрести лучших слонов!

    смотреть пример

    Прараметры шрифта

    Вы наверняка обратили внимание на тот факт, что все свойства CSS предназначенные для работы со шрифтом начинаются с английского слова font (собственно шрифт) font-family, font-size и т.д.

    Так вот это неспроста, дело в том, что все эти свойства являются "дочерними" базового атрибута CSS font в довершении главы о нем собственно и пойдёт речь.

    Речь будет недолгой. Font - (шрифт), являясь базовым атрибутом, может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:

  • font-style;
  • font-variant;
  • font-weight;
  • font-size;
  • font-family.

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

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

    Все это можно осуществить, написав следующие: span{font-style:italic;font-weight:bolder;font-size:8px;font-family:arial}

    А можно обойтись всего 1 строчкой используя базовый атрибут font: span{font:italic bold 20px arial}.

    Мы просто перечислили нужные нам параметры font. Код становится более компактным и лёгким для чтения.

    Пример:

    <title>Параметры шрифта</title>

    <style>

    span{font:italic bold 8px arial}

    </style>

    <span>Этот текст написан курсивом, он жирный, имеет размер 8px и использует шрифт arial</span>

    смотреть пример

    Полезные советы:

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

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

  • По мнению психологов, в длинном тексте должно использоваться не менее 2 шрифтов, но и не более 4. Причем выделение текста "особым" шрифтом должно иметь систематический характер. Например все заголовки 1 шрифтом, "основной текст" вторым, и "особый текст" третьим.

    << предыдущая глава | следующая глава >>

  • Отвечу на любые вопросы. С уважением, Дмитрий Владимирович:
    8-965-148-98-02, diplom07@mail.ru.
    Печатать страницу: Глава 3. Свойства шрифта

    Глава 3, Свойства шрифта, Глава, 3, Свойства, шрифта, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, Создание сайтов, web-программирование, seo-продвижение, создание и раскрутка сайтов, вбиваю в топ-10, как гвозди, попробуйте бесплатно, Создание сайтов, web-программирование, seo-продвижение, Глава, 3, Свойства, шрифта, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, раскрутка сайтов, Вбиваю в ТОП-10, как гвозди, раскрутка сайтов, Делаю и раскручиваю сайты, Дмитрий Владимирович

    ×

    Ваше письмо