Главная css Семейство шрифтов

Семейство шрифтов. CSS

Семейство шрифтов определяет, какой шрифт будет использоваться браузером для отображения текста на веб-странице.
В CSS за установку шрифта отвечает CSS свойство font family.

p {font-family: Arial, sans-serif;} /*шрифт Arial*/
или
<p style="font-family: Arial, sans-serif;">текст...</p>

Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

Список шрифтов начинается с желаемого шрифта и заканчивается названием общего семейства, доступное на всех компьютерах по умолчанию.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и т.д..

Шрифты бывают:

  1. С засечками (семейство serif)
    {font-family:'Times New Roman', serif}
    Вид текста на странице САЙТА

    "Times New Roman" - шрифт по умолчанию в Windows

  2. Без засечек (семейство sans-serif)
    {font-family:Arial, sans-serif}
    Вид текста на странице САЙТА
  3. Моношрифты (семейство monospace) - символы имеют одинаковую ширину
    {font-family:'Courier New', monospace}
    Вид текста на странице САЙТА
  4. Курсивные (рукописные) (семейство cursive;)
    {font-family:'Comic Sans Ms',cursive;}
    Вид текста на странице САЙТА
  5. Декоративные (семейство fantasy;)
    {font-family:Impact,fantasy;}
    Вид текста на странице САЙТА

Семейства шрифта
  • {font-family: 'Times New Roman', Verdana, sans-serif;}
    Купи слона
  • {font-family: 'Monotype Corsiva', sans-serif;}
    Купи слона
  • {font-family: 'Comic Sans MS', sans-serif;}
    Купи слона

Ниже приведены Примеры распространенных шрифтов

Семейство веб-шрифтов

sans-serif (без засечек)
Семейство шрифта (font-family) Пример
Arial, Helvetica, sans-serif Съешь же еще этих сочных мандаринов.
"Arial Black", Gadget, sans-serif Съешь же еще этих сочных мандаринов.
"Comic Sans MS", cursive, sans-serif Съешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serif Съешь же еще этих сочных мандаринов.
"Lucida Sans Unicode", "Lucida Grande", sans-serif Съешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serif Съешь же еще этих сочных мандаринов.
"Trebuchet MS", Helvetica, sans-serif Съешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serif Съешь же еще этих сочных мандаринов.

serif (с засечками)
Семейство шрифта (font-family) Пример
Georgia, serif Съешь же еще этих сочных мандаринов.
"Palatino Linotype", "Book Antiqua", Palatino, serif Съешь же еще этих сочных мандаринов.
"Times New Roman", Times, serif Съешь же еще этих сочных мандаринов.

monospace (моноширинные)
Семейство шрифта (font-family) Пример
"Courier New", Courier, monospace Съешь же еще этих сочных мандаринов.
"Lucida Console", Monaco, monospace Съешь же еще этих сочных мандаринов.