Шрифты в CSS.



Для параметра шрифтов используется свойство font..


Обязательными для шрифтов является размер шрифта и его семейство. Кроме этого шрифты имеют еще такие свойства:


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

Свойство FONT-FAMILY


Все шрифты можно разделить на следующие группы по семейственности:


  • Serif - шрифты с засечками, например, Times New Roman.
  • Sans-serif - шрифты рубленные, без засечек, например, Arial.
  • Monospace - моноширинные шрифты, например, Courier New.
  • Cursive - курсивные шрифты, например, Calisto MT.
  • Fantasy - декоративные шрифты, например, Fortuna Dot.

Для свойства font-family указывают шрифт и группу шрифтов.


body { font-family:verdana, arial, sans-serif; }

Записывается вначале самый приоритетный шрифт, затем менее приоритетный и, наконец, семейство шрифтов. Шрифты берутся в скобки, если в названии присутствуют пробелы (например шрифт "Times New Roman"). Браузер читает вначале шрифт verdana, если по какой-то причине он отсутствует читает - arial и так далее.


Свойство FONT-STYLE


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

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

Пример записи кода:

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> p#no{ font-family: verdana, arial, sans-serif; font-style:normal; } p#it{ font-family: verdana, arial, sans-serif; font-style:italic ; } p#ob{ font-family: verdana, arial, sans-serif; font-style:oblique; } </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

   ПРИМЕР

Отличие свойства italic от свойства oblique в том, что italic означает использование встроенного в шрифт курсивного начертания, а oblique искусственно созданный наклон букв под углом.

Свойство FONT-VARIANT


Данное свойство font-variant применяется для написания букв нижнего регистра. принимает следующие значения.

  • normal - значение по умолчанию, текст обычный.
  • small-caps - малые прописные буквы.

Пример записи кода:

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> p#no,p#it,p#ob{ font-family: verdana, arial, sans-serif; } p#it{ font-variant:small-caps; } </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

   ПРИМЕР


Свойство FONT-WEIGHT


С помощью данного свойства font-weight задают жирность шрифта.

  • normal - нормальный по умолчанию соответствует числовое значение 400, а значению bold - 700.
  • bold - более жирный по отношению к базовому, унаследованному от предка
  • bolder - полужирный
  • lighter - менее жирный к базовому, унаследованному от предка

Пример записи кода:

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> p#no,p#it,p#ob{ font-family: verdana, arial, sans-serif; } p#ob{ font-weight:bold; } </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

   ПРИМЕР


Свойство FONT-SIZE


Свойство font-size регулирует размер шрифта. Шрифт может быть задан единицами измерений:

  • px - одна точка на экране называется пикселем;
  • ex - высота строчной буквы шрифта в используемом тексте;
  • em - высота шрифта в используемом тексте;

В CSS используются относительные и абсолютные единицы измерения.

Относительные единицы измерения

Относительные единицы измерения устанавливают размер,который зависит от другой величины.

  • px - пиксель зависит от разрешения монитора компьютера;
  • ex - высота символа зависит от текущего шрифта;
  • em - зависит от размера шрифта;
  • % - размер в процентах;
Пример записи кода:

<html> <head> <title></title> </head> <body> <p style="font-size: 3ex;">3 символа x. </p> <p style="font-size: 1,5em;">Размер шрифта увеличен в полтора раза. </p> <p style="font-size: 20px;"> 20 пикселей. </p> <p style="font-size: 180%;">180% от текущего размера шрифта. </p> </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Абсолютные единицы измерения

Абсолютные единицы измерения применяются крайне редко. Они не зависят ни от какой величины.

  • cm - сантиметр, см;
  • in - дюйм, который равен 24,5 мм;
  • mm - миллиметр, мм;
  • pc - пика равна 12 пунктам;
  • pt - пункт равен 1/72дюйма;

Размер шрифта 12 соответствует 12 пунктам.

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> <p style="font-size:7mm;">7 Миллиметров. </p> <p style="font-size:2cm;">2 сантиметра. </p> <p style="font-size:1.5in;">Полтора дюйма. </p> <p style="font-size:14pt;">12 пунктов - 12 шрифт. </p> <p style="font-size:1pc;">1 пика - 12 пунктов. </p> </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Так как у пользователей разные разрешения мониторов и, чтобы текст был читаем, лучше использовать способы измерения - пиксели или em.

Сокращенная запись свойства font.

Перечисленные свойства чаще записывают в сокращенном варианте.

<html> <head> <title></title> <style type="text/css"> P{ font-style: italic; font-variant: normal ; font-weight: bold; font-size: 30px; font-family:arial, sans-serif; } </style> </head> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Тоже самое в краткой форме.

<html> <head> <title></title> <style type="text/css"> p{font :italic normal bold 30px arial,sans-serif;} </style> </head> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Все значения указывают в определенном порядке (font-style_ font-variant_font-weight_font-size_font-family) и через пробел.

Далее рассмотрим: Текст в CSS