Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Декабрь, 2012

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

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

Атрибуты шрифта:

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

Типы шрифтов:

  • serif («антиква» — шрифты с засечками) – пропорциональные шрифты, литеры которых оканчиваются горизонтальными черточками (серифами), например: Georgia, Times New Roman, Century Schoolbook;
  • sans-serif («гротеск» — гротескные шрифты без засечек) – пропорциональные шрифты с прямыми концами литер, например: Arial, Helvetica, Verdana, Tahoma, «Trebuchet MS»;
  • monospace (моноширинные шрифты для отображения программного кода) – шрифты с постоянной шириной знаков, например: Courier New, Prestige;
  • cursive — рукописные шрифты, например: ZapfChancery;
  • symbol — шрифты для определённых символов, например: ZapfDingbats;
  • fantasy – декоративные шрифты, например: ComicSans;
  • other — все остальные шрифты, например: техногенные, гранжевые, готические и т.п.

Значение параметра font-family может принимать вид списка, элементы которого разделены запятыми. В этот список включают названия шрифтов и обязательно тип шрифта.

Это необходимо, так как, если на компьютере клиента отсутствует, скажем, шрифт «Trebuchet MS», а в правиле указано только оно, то разработчик не может предположить, как страница будет выглядеть на экране пользователя. В том, случае, когда в правилах указан тип шрифта, браузер будет подтавлять шрифт из этого семейства которое присутствует на машине клиента (например если будет указан тип sans-serif то вместо «Trebuchet MS» будет подставлен шрифт Arial, Verdana и т.д., а не «Times New Roman»).

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

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

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

Некоторые особенности использования шрифтов.

Пример:

font-family: Verdana, sans-serif;
font-family: Georgia, serif;
font-family: Courier New, monospaced;

В Windows всё отобразится абсолютно верно, поскольку будут найдены и использованы указанные в стиле шрифты. А вот в других ОС в том случае, если этих шрифтов нет, будут использованы те гарнитуры, которые прописаны по умолчанию в настройках браузера.

Этой ситуации можно избежать. Просто нужно прописать гарнитуры тех шрифтов, которые есть и в Linux, и в MacOS. Но их может не быть в Windows (В MacOS X и Linux многие шрифты совпадают: Helvetica, Courier, Times, Palatino. Немного может различаться характер рисунка данных шрифтов, но в целом они довольно схожи). И тогда запись будет выглядеть следующим образом:

font-family:
 (шрифт без засечек, например "Trebuchet MS"), Arial, Helvetica, sans-serif;
font-family:
 (какой нибудь шрифт с засечками), "Times New Roman", Times, serif;
font-family:
 (моноширинный шрифт), "Courier New", Courier, monospaced;

Знакомая запись, не правда ли?

Вот еще пример:

  • font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;

Заметьте, насколько нелогично идёт чередование шрифтов в указании: наиболее распространённый Arial предшествует Verdana и Tahoma, которые практически всегда если и есть в системе, то лишь вместе. То есть Tahoma не будет использован никогда, да и у Verdana нет ни малейшего шанса: всех со стопроцентной вероятностью обставит Arial. Тогда зачем было городить такую нелепую конструкцию? Это издержки бездумного «копипаста».

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

  • font-style – параметр описания стиля шрифта. Font-style принимает значения

    italic

    (наклонный шрифт или курсив),

    oblique

    (простой наклонный шрифт), normal (вид по умолчанию);

  • font-variant – вариант шрифта. Параметр принимает значения

    small-caps

    (малые прописные) и normal;

  • font-weight – вес, степень «ужирнения» шрифта. Для этого атрибута установлены значения: normal (обычный),

    bold

    ,

    bolder

    ,

    lighter

    , а также цифровые величины 100, 200, 300, …, 900 (такое разнообразие ступеней ужирнения шрифта полностью броузерами не реализуется);

  • font-stretch – параметр, задающий степень разнесения знаков по горизонтали. Спецификацией CSS 2.0 предусмотрен ряд значений, которые в настоящее время броузерами не поддерживаются: normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded. Применение действия параметра font-stretch остается на будущее;
  • font-size – чаще всего применяемый атрибут, задающий высоту шрифта. Атрибут принимает цифровые значения, выраженные в абсолютных единицах измерения: px — пиксели, pt — пункты, mm — миллиметры, cm — сантиметры еще in и pc, либо одно из значений:
    • font-size: xx-small;
    • font-size: x-small;
    • font-size: small;
    • font-size: medium;
    • font-size: large;
    • font-size: x-large;
    • font-size: xx-large;

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

    • font-size: smaller;
    • font-size: larger;
  • font – сконцентрированная форма записи всех свойств шрифта.

Порядок записи для сокращенной записи свойств шрифта в CSS:

  1. font-style,
  2. font-variant,
  3. font-weight,
  4. font-size,
  5. line-height,
  6. font-family.

Такая сокращенная запись будет работать, если указаны font-size и font-family. Если их опустить, то правило проигнорируется. Если не указывать font-weight, font-style или font-variant, то им присваивается значение normal, так что учтите это.

Пример:

font: italic small-caps bold 1em/1.5em Arial, Helvetica, sans-serif;

Вместо:

font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;

21 августа 2009, 22:12