Стильові властивості шрифту в CSS

Категорії статей: CSS ; 26.04.2010

Розглянемо в цій статті як можна управляти шрифтом на веб-сторінці. Почнемо з однієї із найважливіших властивостей - font-family. Властивість font-family визначає гарнітуру шрифту. Як значення цієї властивості потрібно вказувати ім'я гарнітури шрифту і ім'я загальнодоступної гарнітури. Можна вказувати декілька імен гарнітур шрифту і імен загальнодоступних гарнітур, оскільки у користувача на комп'ютері може не виявитися якого-небудь шрифту. Перераховувати їх потрібно через кому, в порядку зменшення пріоритету. Імена гарнітур шрифтів, що містять пропуски потрібно записувати в лапках. Наприклад

Код
{ font-family: Arial "Times New Roman", sans-serif; }

Існують наступні загальнодоступні гарнитури

  • serif - антиква;
  • sans-serif - гротески;
  • cursive - курсив;
  • fantasy - алегоричні;
  • monospace - моноширинний шрифт.

Властивість font-weight задає насиченість шрифту. Задати насиченість можна декількома способами. Перший спосіб - це використання ключових слів normal і bold, які задають відповідно нормальне і напівжирне зображення шрифту. Наприклад

Код
div { font-weight: bold; }

Другий спосіб: вказати значення одним числом з дев'яти від 100 до 900 (тобто 100, 200, 300 і так далі). Причому значення 400 відповідає зображенню normal, а значення 700 відповідає зображенню bold. Наприклад

Код
span { font-weight:500; }

Третій спосіб - це використання відносних значень bolder і lighter, які відповідно збільшують і зменшують насиченість відносно значення по замовуванню. Наприклад

Код
span, div { font-weight: bolder; }

Властивість font-size задає розмір шрифту. Розмір шрифту можна задати декількома способами. Можна задати розмір в пікселях (наприклад, 7px, 12px, 17px), в процентному відношенні відносно відносно значення по замовуванню(80%, 120%), відносними значеннями larger і smaller, які відповідно збільшують і зменшують розмір шрифту. Наприклад

Код
div { font-size:12px; }
span { font-size:120%; }
p { font-size:larger; }

Можна вказати одне з семи значень xx-small, x-small, small, medium, large, x-large, xx-large. Думаю зрозуміло, що значення xx-small відповідає найменшому розміру шрифту, xx-large відповідає максимальному розміру шрифту і т.д. Наприклад

Код
div { font-size: xx-small; }

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

  • normal - задає звичайний вигляд шрифту (значення по замовчуванню);
  • italic - задає курсивне зображення шрифту;
  • oblique - задає похиле зображення шрифту.
Например

Код
div { font-size: italic; }

Дуже часто браузери при вказівці значення oblique відображують шрифт курсивом, оскільки просто може не бути в шрифті даного начертання.
Є ще одна чудова властивість font-variant, яке задає вигляд рядкових букв тексту елементу. Може приймати наступні значения

  • normal - задає звичайний вигляд рядкових букв тексту (значення по замовчуванню);
  • small-caps - виводить шрифт, що містить рядкові букви у вигляді зменшеного розміру прописних букв (капітель).
Например

Код
div { font-variant: small-caps; }

По зовнішнім джерелам

Один комментарий на запись “Стильові властивості шрифту в CSS”

  1. maque пишет:

    Дякую за статтю. Дещо підучив українські терміни у CSS. Бажаю розвитку Вам та Вашому сайту!

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.78MB | 0.14Sec ad Google