Урок №5. CSS – шрифт.

На данном этапе нашего обучения, подошла очередь разобраться в шрифтах CSS.

Содержание урока:

Font-family (разновидность шрифтов)
Font-style (стиль шрифта)
Font-variant (вариант шрифта)
Font-weight (толщина шрифта)
Font-size (размер шрифта)
Сокращенная запись шрифтов

 


 

Font-family (разновидность шрифтов)

Font-family – данное свойство определяет семейство шрифта.

Условно разделим их на 4 группы:

    Serif – шрифты с засечками. Ярким примером является шрифт Times New Roman.

    Sans-serif – шрифты без засечек. Яркий пример — шрифт Arial.

    Monospace – шрифты с одинаковым расстоянием между символами. Пример — Courier New.

    Fantasy – декоративный шрифт. Для названий и т.д.

Значением данного свойства (Font-family) является шрифт и группа, к которой он принадлежит. Записываем через запятую.

Например:

body{

  font-family: Times New Roman, serif;

}

 

Исходя из этого свойства, видно, что весь текст на странице будет в шрифте Times New Roman. Если же данный шрифт не обнаружен на компьютере пользователя, который в данный момент смотрит страничку, будет использован любой другой шрифт, присутствующий в системе пользователя из группы serif. В качестве значения, можно указывать несколько шрифтов из одной группы. В таком случае они прописываются в порядке убывания, первый прописанный шрифт имеет наибольший приоритет.

Пример:

body{

  font-family: Times New Roman, Roman, New York, Georgia, serif;

}

 


 

Font-style (Стиль шрифта).

Это свойство задает тип шрифта. Существует 3 разновидности:

        Normal – обычный. Используется по умолчанию. 

        Oblique – наклонный шрифт.

        Italic – курсивный.

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

   <html>

     <head>

       <title>css шрифты</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <p id="aa">Текст в параграфе с нормальным шрифтом.</p>

       <p id="ab">Текст в параграфе с наклонным шрифтом.</p>

       <p id="ac">Текст в параграфе с курсивным шрифтом.</p>

     </body>

   </html>

 

В таблице стилей зададим каждому параграфу свое правило:

p#aa, p#ab, p#ac{

  font-family: Georgia, serif;

}

p#aa{

  font-style:normal;

}

p#ab{

  font-style:oblique;

}

p#ac{

  font-style:italic;

}

 

Результат:

Пример свойства Font-style

 

Вы заметили разницу между наклонным и курсивным шрифтом? Верно, ее нет, но значения у них разные. Объясняется это тем, что у каждого шрифта по умолчанию есть свои начертания, если у какого либо шрифта нет параметра курсива(italic), он будет превращен в наклонный(oblique) шрифт.

 


 

Font-variant (вариант шрифта)

Свойство Font-variant задает два способа написания букв из двух возможных:

        Normal – буквы имеют обычный вид. Используется по умолчанию.

        Small-caps — маленькие буквы имеют вид прописных.

Пример:

p#aa, p#ab, p#ac{

  font-family: Georgia, serif;

}

p#aa{

  font-style:normal;

}

p#ab{

  font-style:oblique;

}

p#ac{

  font-style:italic;

  font-variant:small-caps;

}

 

Результат:

Пример свойства Font-variant

 

Очень просто, правда? Давайте же скорее приступим к следующему свойству.

 


 

Font-weight (толщина шрифта)

Свойство font-weight отвечает за жирность букв в вашем тексте. Задается двумя способами: цифры и слова.

Цифры от 100 и до 900. При этом значение 100, это буквы с наименьшим значением жирности, а 900 соответственно с наибольшим.

Слова:

        Lighter – менее жирный по отношении к стандартному (тому что был задан у родителя).

        Normal – нормализированная жирность. Используется по умолчанию.

        Bold – полужирный шрифт.

        Bolder – более жирный по отношению к стандартному (тому что был задан у родителя).

На примере зададим как словесное значение, так и цифровое:

p#aa, p#ab, p#ac{

  font-family: Georgia, serif;

}

p#aa{

  font-style:normal;

  font-weight:400;

}

p#ab{

  font-style:oblique;

  font-weight:nomal;

}

p#ac{

  font-style:italic;

  font-weight:bold;

}

 

Как видно, жирность шрифта была задана для всех трех параграфов. Первый и второй параграфы одинаковы, это говорит о том, что значение normal равно значению 400.

Разобрались? Погнали дальше!

 


 

Font-size (размер шрифта)

Свойство font-size управляет размером шрифтов.

Существует три способа определения размера шрифта:

  1. Слова (small, medium, large)
  2. Относительные единицы (%, em)
  3. Единицы измерения длины (миллиметры, сантиметры, пиксели, дюймы, фунты).

Что бы ни тратить Ваше драгоценное время скажу сразу, словами неудобно по причине некорректного отображения в разных браузерах, относительные единицы задаются относительно элемента-предка, что тоже не очень удобно в некоторых ситуациях.

Целесообразно использовать на данный момент единицы измерения длины, а конкретнее пиксели.

Пример:

p#aa, p#ab, p#ac{

  font-family: Georgia, serif;

}

p#aa{

  font-style:normal;

  font-weight:400;

  font-size:12px;

}

p#ab{

  font-style:oblique;

  font-weight:nomal;

  font-size:16x;

}

p#ac{

  font-style:italic;

  font-weight:bold;

  font-size:24px;

}

 

Результат:

Пример свойства font-size

 


 

Сокращенная запись шрифтов

Все свойства шрифтов записываются по очереди через пробел. Очередность должна быть такова:

font-style, font-variant, font-weight, font-size, font-family

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

Пример:

p#aa, p#ab, p#ac{

  font:italic 400 10px Georgia, serif;

}

p#aa{

  font-style:oblique;

}

p#ab{

  font-size:16x;

}

p#ac{

  font-weight:bold; 

}

 

Как видно из примера, сначала было задано общее правило для всех трех параграфов, а уже потом для каждого по отдельности (если необходимо).

Вот и закончили рассматривать шрифты в CSS.

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

С нетерпением жду Вас на следующем уроке. До встречи!

 


 

Закрыть меню