Главная css Стилевые параметры шрифта

Стилевые параметры шрифта

CSS для шрифта

Параметр Значение Описание
font-family

(определяет список семейств шрифтов)

Шрифты

 название шрифта Обычно задаются несколько похожих шрифтов в порядке предпочтения.
Названия разделяются запятыми.
Если название шрифта состоит из нескольких слов, то оно заключается в кавычки.
Список шрифтов желательно завершить
родовым именем шрифта:
  • serif (для Times),
  • sans-serif (для Helvetica),
  • cursive,
  • fantasy,
  • monospace (для Courier)
                    
<style>
h1 {font-family: "Times New Roman", serif}
</style>

<body style='font-family: Arial, Helvetica, sans-serif'>
font-size

(размер шрифта)

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

 относительный размер:

larger (больше),
smaller (меньше)

Значения интерпретируются относительно таблицы размеров шрифтов браузера и размера шрифта элемента-родителя.

Например,
если родительский элемент имеет размер шрифта " medium", значение " larger" сделает размер шрифта текущего элемента равным " large".

Размер можно задавать в % и в em.
абсолютный размер:
xx-small,
x-small,
medium (по умолчанию),
large,
x-large,
xx-large		 

<style>
body {font-size: 12pt}
h1 {font-size: large}
h2 {font-size: 150%}
h3 {font-size: 12pt}
h4 {font-size: 75%}
</style>

<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
</body>

Заголовок 1 и 3 заданы в абсолютных единицах,
а Заголовок 2 и 4 в % относительно размера шрифта, заданного для тега <body>, являющегося родительским (100%) элементом для заголовков.

Размер шрифта в CSS и HTML
CSS xx-small x-small small medium large x-large xx-large -
Масштаб (коэфф-т) 3/5 3/4 8/9 1 6/5 3/2 2/1 3/1
Размер HTML 1 - 2 3 4 5 6 7
Заголовки h6 - h5 h4 h3 h2 h1 -

  1. Размер шрифта в CSS и HTML - xx-small
  2. Размер шрифта в CSS и HTML - x-small
  3. Размер шрифта в CSS и HTML - small
  4. Размер шрифта в CSS и HTML - medium (по умолчанию)
  5. Размер шрифта в CSS и HTML - large
  6. Размер шрифта в CSS и HTML - x-large
  7. Размер шрифта в CSS и HTML - xx-large

Распространенные единицы измерения шрифта:

  • em - высота шрифта элемента
    {font-size: 2.5em},
  • pt - пункты
    {font-size: 16pt},
  • px - пикселы
    {font-size: 12px},
  • % - проценты
    {font-size: 80%}.

Размер шрифта
font-weight
(жирность шрифта)		 normal соответствует числу 400
bold Жирный (700)
bolder Жирнее
lighter Светлее
число Одно из девяти целых чисел от 100 до 900

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

Таблица font-weight
font-weight: 100 Thin (Hairline) - Тонкий (как волос)
font-weight: 200 Extra Light (Ultra Light) - Extra светлый (Ультра светлый)
font-weight: 300 Light - Светлый
font-weight: 400 Normal or Reqular - Нормальный или Обычный
font-weight: 500 Medium - Средний
font-weight: 600 Semi Bold (Demi Bold) - Полужирный
font-weight: 700 Bold - Жирный
font-weight: 800 Extra Bold (Ultra Bold) - Экстра жирный (Ультра жирный)
font-weight: 900 Black (Heavy) - Черный (Тяжелый)

font-style
(стиль шрифта)		 normal Нормальный прямой - по умолчанию
italic Курсив
oblique Наклонный
font-variant
(вариант стиля шрифта)		 normal по умолчанию и не влияет на отображение шрифта.
small-caps Заменяет строчные буквы прописными, но делает их меньше по размеру, чем прописные буквы текущего шрифта. 

<style>
span {font-variant: small-caps}
</style>
Купи слона! (до изменения стиля)
Купи слона! (после изменения стиля)
font
(позволяет установить сразу несколько свойств шрифта в одном определении) 		font-style;
font-variant;
font-weight;
font-size;
line-height;
font-family		 Значения параметров указываются через пробел.
Если задается высота строки (line-height), то ее значение отделяется от размера шрифта (font-size) слэшем (/).
Если список шрифтов (font-family) содержит более одного элемента, то последние отделяются друг от друга запятыми.		 
                    
<style>
body {font: italic 10pt/12pt "Times", serif}
</style>
@font-fase
(указывает семейство шрифтов
и URL-адрес шрифта,
если шрифт отсутствует на компьютере)		 font-family Название семейства шрифтов.
src URL-адрес шрифта.
Синтаксис: src:url(URL-адрес)
Открывающаяся круглая скобка идет сразу за словом url 
подкдючения шрифта                     
<style>
 @font-fase {
 font-family: MyFont;
 src:url(http://myserver.ru/MyFont.ttf)
 }
 p {font-family: MyFont;}
</style>