Шрифт в CSS

Управление шрифтами в CSS не сильно отличается от HTML, однако использование CSS дает свои преимущества. Во-первых пользоваться CSS намного удобнее, а во-вторых правила CSS для текстовых блоков гораздо экономят объем HTML – страницы. Для задания параметров шрифтов в HTML используется элемент FONT, с помощью которого задается гарнитура шрифта, размер и цвет. В CSS эти параметры задаются при помощи свойств.

Содержание:

Это свойство предполагает задание гарнитуры шрифта, а все шрифты, в свою очередь, делятся на несколько семейств:

  • serif – шрифты с засечками, например: Times New Roman;
  • sans-serif – шрифты рубленые, без засечек, например: Arial, Verdana, Tahoma;
  • monospace – моноширинные шрифты, с одинаковым расстоянием между символами, например: Courier New;
  • cursive – шрифты курсивные, например: Calisto MT;
  • fantasy – декоративные шрифты.

Значением свойства FONT-FAMILY является название семейства шрифтов, посмотрим на примере:

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

В данном случае текст внутри абзацев будет выполнен шрифтом Verdana, а если такого шрифта на компьютере посетителя твоей страницы не окажется, то будет использоваться любой шрифт семейства SANS-SERIF.

Это свойство задает стиль шрифта при помощи некоторых значений:

  • normal – обычный;
  • oblique – наклонный;
  • italic – курсивный.

Смотрим пример написания стиля:

p {font-family: Verdana, sans-serif}
p.cursiv {font-style: italic}

Абзац обозначенный на странице классом class=”cursiv” будет отличаться от остальных курсивным начертанием. Так же при помощи свойства FONT-STYLE можно изменить начертание шрифта для элементов HTML.

em {font-style: normal; color: green}

Теперь слова выделенные тегами < em >, вместо курсива будут выделены зеленым цветом.

С помощью этого свойства можно задать вариант написания букв. Вариантов всего два:

  • normal – обычный;
  • small-caps – малые прописные буквы.
h1, h2, h3, h4, h5, h6 {font-variant: small-caps}

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

Это свойство отвечает за насыщенность шрифта, значениями являются числа 100, 200, 300, 400, и т.д до 900. Обычному шрифту соответствует значение – 400, полужирному – 700. Лично я этим свойством никогда не пользовался, да и браузеры поддерживают не все девять возможных значений.

Это свойство задает необходимый размер для шрифта. Задать размер можно несколькими способами:

  • ключевыми словами, причем реальный размер шрифта будет зависеть от браузера и операционной системы (сам не использую), всего их семь:
    • xx-small;
    • x-small;
    • small;
    • medium;
    • large;
    • x-large;
    • xx-large;
  • процентами (%);
  • любыми единицами длины (рекомендую) – этот способ универсален, так как размер шрифта отображается одинаково в любом браузере, пишутся стили так (первый задан в пикселах, второй в пунктах):
p {font-size: 12px}

p {font-size: 10pt}

При использовании стенографического свойства font можно коротко записать все свойства шрифта. Смотрим пример:

p {
font-family: Verdana, sans-serif;
font-style: normal;
font-variant: small-caps;
font-size: 12px
}

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

p {font: normal small-caps 12px Verdana, sans-serif}

На этом со шрифтами закончим и перейдем к свойствам текста.

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *