font ⚡️ HTML и CSS с примерами кода

Свойство font универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Демо

Шрифт и Цвет
  • @font-face
  • font
  • font-family
  • font-feature-settings
  • font-kerning
  • font-language-override
  • font-optical-sizing
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-synthesis
  • font-variant
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-variant-position
  • font-variation-settings
  • font-weight
  • line-height
  • color
  • opacity
  • print-color-adjust

Синтаксис

/* size | family */
font: 2em 'Open Sans', sans-serif;
/* style | size | family */
font: italic 2em 'Open Sans', sans-serif;
/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;
/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;
/* The font used in system dialogs */
font: message-box;
font: icon;
/* Global values */
font: inherit;
font: initial;
font: unset;

Значения

В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.

Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.

caption
Шрифт для текста элементов форм вроде кнопок.
icon
Шрифт для текста под иконками.
menu
Шрифт применяемый в меню.
message-box
Шрифт для диалоговых окон.
small-caption
Шрифт для подписей к небольшим элементам управления.
status-bar
Шрифт для строки состояния окон.

Значение по-умолчанию: зависит от использования

Применяется ко всем элементам

Спецификации

  • CSS Fonts Module Level 3
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Описание и примеры

p {
  font: 12pt/10pt sans-serif;
}

Из типографики пошла запись указывать через слэш размер шрифта и высоту строки. Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — высоту строки. В качестве семейства указывается рубленый шрифт (sans-serif).

p {
  font: bold italic 110% serif;
}

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold

и italic можно поменять местами. Размер текста задаётся в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p {
  font: normal small-caps 12px/14px fantasy;
}

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>font</title>
    <style>
      .
 
 layer1 {
        font: 12pt sans-serif;
      }
      h2 {
        font: 2em serif;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Экзистенциальный либерализм</h2>
      <p>
        Карл Маркс исходил из того, что типология средств
        массовой коммуникации неизбежна.
      </p>
    </div>
  </body>
</html>

font | CSS справочник

Поддержка браузерами

12.0+ 4.0+
1.0+		 1.0+ 3.5+ 1.0+

Описание

CSS свойство font является универсальным, оно позволяет одновременно задать сразу несколько параметров шрифта. Для этого используются специальные ключевые слова: caption, icon, menu, message-box, small-caption, status-bar или значения следующих свойств:

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

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

Но для свойства font есть несколько правил использования, если эти условия не выполняются, свойство является недопустимым и полностью игнорируется:

  • значения свойств font-size и font-family являются обязательными к указанию
  • размер высоты строки (line-height) должен указываться сразу после размера шрифта, через косую черту (слэш) — «/«
  • если будут устанавливаться значения свойств font-style, font-variant и font-weight, то они должны быть определены перед font-size
  • font-family определяется последним, после всех остальных свойств (значение inherit недопустимо к применению)
Значение по умолчанию: не определено
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object. style.font=»italic small-caps bold 12px arial,sans-serif»

Синтаксис

font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box
	 |small-caption|status-bar|inherit;

Значения свойства

Значение Описание
font-style Задает стиль шрифта. Смотрите возможные значения у свойства font-style.
font-variant Указывает разновидность шрифта. Смотрите возможные значения у свойства font-variant.
font-weight Задает жирность шрифта. Смотрите возможные значения у свойства font-weight.
font-size/line-height Задает размер шрифта и высоту строки. Смотрите возможные значения у свойств font-size и line-height.
font-family Определяет семейство шрифта. Смотрите возможные значения у свойства font-family.
caption Шрифт используется для текста элементов управления (кнопок, раскрывающихся списков и т.п.).
icon Шрифт используется для текста под иконками.
menu Шрифт используется в раскрывающимися меню.
message-box Шрифт используется для диалоговых окон.
small-caption Тоже самое, что и caption, только используется уменьшенный шрифт (для небольших элементов).
status-bar Шрифт используется для строки состояния окна.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    p.
 
 ex1 { font: 15px arial,sans-serif; }
    p.ex2 { font: italic bold 12px/1 Georgia,serif; }
  </style>
</head>

<body>

  <p>Пример демонстрирует, как можно изменить текст
  на странице с помощью свойства font. </p>
  
  <p>С помощью свойства font можно отредактировать текст,
  например поменяв толщину шрифта, его размер и высоту строки.</p>
  
</body>
</html>

Результат данного примера в окне браузера:

Семейство шрифтов CSS (с примерами)

В этом уроке вы узнаете о семействе шрифтов CSS с помощью примеров.

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

 h2 {
    семейство шрифтов: Courier, моноширинный;
}

Вывод браузера

Здесь font-family устанавливает шрифт элемента h2 на Courier , monospace .

Типы семейств шрифтов CSS

Семейства шрифтов делятся на два типа:

  • Универсальное семейство : Относится к категории шрифтов со схожими конструктивными характеристиками. Например, Serif , sans-serif , Cursive и т. д.
  • Семейство шрифтов : Относится к конкретному названию семейства шрифтов, например Helvetica , Arial , Georgia и т. д.

Синтаксис семейства шрифтов CSS

Синтаксис свойства font-family следующий:

 font-family: family-name | родовое семейство | начальная | наследовать;

Здесь,

  • фамилия-имя : относится к определенному семейству шрифтов, например Arial , Helvetica и т. д.
  • generic-family : относится к более широкой категории семейств шрифтов с похожими характеристиками дизайна, такими как serif , sans-serif и т. д.
  • начальный : устанавливает для font-family значение по умолчанию
  • наследовать : наследует семейство шрифтов от родителя

Давайте посмотрим на пример,

 h2 {
    семейство шрифтов: "Source Sans Pro", "Arial", без засечек;
}

В приведенном выше примере браузер сначала попытается отобразить Source Sans Pro . Если он недоступен, браузер попытается отобразить Arial . А если его тоже нет, то браузер наконец-то будет использовать шрифт из 9-ки.0005 семейство без засечек .

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

Типы семейств универсальных шрифтов CSS

В CSS существует пять универсальных семейств, которые относятся к более широкой категории семейств шрифтов с похожими конструктивными характеристиками.

Serif

Serif Шрифты имеют небольшую линию или штрих в конце каждого символа. Они используются в традиционных печатных материалах, таких как книги, журналы и т. д., а также в официальных документах, таких как резюме или деловые письма. Например,

HTML

CSS

 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        Семейство засечек
    
    <тело>
         
Семейства шрифтов с засечками
 
        
Шрифт Times New Roman

        
Грузинский шрифт

    
 
 ч2 {
    семейство шрифтов: "Times New Roman", с засечками;
}
p.times-новый роман {
    /* устанавливает текст в "Times New Roman" */
    семейство шрифтов: "Times New Roman";
}
p.georgia {
    /* устанавливает текст в Грузию */
    семейство шрифтов: Грузия;
}

Вывод браузера

Некоторые популярные семейства шрифтов serif : Times New Roman , Georgia , Garamond , Palatino 90 006 и т. д.

Без засечек

Без засечек 9Шрифты 0006 не имеют маленькой линии или штриха в конце символов. Они считаются чистыми и современными, поэтому часто используются в цифровых интерфейсах и онлайн-контенте. Например,

HTML

CSS

 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        Семейство шрифтов без засечек
    
    <тело>
         
Семейства шрифтов с засечками
 
        
Шрифт Helvetica

        
Шрифт Arial

    
 
 ч2 {
    семейство шрифтов: Helvetica, Arial, без засечек;
}
p.arial {
    /* устанавливает для текста шрифт Helvetica*/
    семейство шрифтов: Helvetica;
}
p.helvetica {
    /* устанавливает для текста шрифт Arial */
    семейство шрифтов: Arial;
}

Вывод браузера

Некоторые популярные семейства шрифтов без засечек : Open Sans , Poppins , Helvetica , Arial и т. д.

Моноширинный

Моноширинный шрифты имеют унифицированные интервал между всеми символами. Они используются в программном коде и текстовых редакторах, поскольку их легко читать. Например,

HTML

CSS

 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        Семейство моноширин
    
    <тело>
         
Семейства моноширинных шрифтов
 
        
Курьерский шрифт

        
Шрифт Consolas

    
 
 ч2 {
    семейство шрифтов: Courier, моноширинный;
}
п.курьер {
    /* устанавливает для текста шрифт Courier*/
    семейство шрифтов: Courier;
}
p.consolas {
    /* устанавливает для текста шрифт Consolas */
    семейство шрифтов: Consolas;
}

Вывод браузера

Некоторые популярные семейства шрифтов без засечек : Fira Mono , Courier , Consolas и т. д. 900 03

Cursive

Cursive шрифты имеют соединительные штрихи символов и имитировать почерк. Они часто используются в декоративных целях на веб-страницах. Например,

HTML

CSS

 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        Курсивное семейство
    
    <тело>
         
Семейства курсивных шрифтов
 
        
Шрифт Lucida Handwriting

        
Шрифт Segoe Script

    
 
 ч2 {
    семейство шрифтов: "Lucida Handwriting", курсив;
}
p.lucida-почерк {
    /* устанавливает для текста шрифт Lucida Handwriting*/
    семейство шрифтов: "Lucida Handwriting";
}
p.segoe-скрипт {
    /* устанавливает для текста шрифт Segoe Script */
    семейство шрифтов: "Segoe Script";
}

Вывод браузера

Некоторые популярные семейства шрифтов cursive : Lucida Handwriting , Apple Chancery , Brush Script и т. д. 9000 3

Фэнтези

Шрифты Fantasy в первую очередь являются декоративными шрифтами. Они используются для творческих и игривых дизайнерских проектов. Например,

HTML

CSS

 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        Фантастическая семья
    
    <тело>
         
Семейства фэнтезийных шрифтов
 
        
Шрифт Papyrus

        
Шрифт Harrington

    
 
 ч2 {
    семейство шрифтов: Papyrus, фэнтези;
}
п.папирус {
    /* устанавливает текст в Papyrus */
    семейство шрифтов: Papyrus;
}
п.харрингтон {
    /* устанавливает текст в Харрингтон */
    семейство шрифтов: Harrington;
}

Вывод браузера

Некоторые популярные семейства шрифтов fantasy : Papyrus , Harrington , Wisp , Arkana 90 006 , Rivendell и т. д.

Семейство шрифтов CSS — бесплатное руководство для изучения HTML и CSS

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

Общие семейства шрифтов

Шрифты сгруппированы в 5 общих семейств:

  • шрифты с засечками имеют маленькие линии в конце каждого символа
  • без засечек
  • моноширинный
  • курсив
  • фантастика

курсив и фэнтези никогда не используются.

Поскольку свойство font-family наследуется всеми дочерними элементами HTML, можно применить шрифт ко всему документу HTML, применив его к предку всех элементов HTML: элементу .

 body{ font-family: sans-serif;}

С этим правилом CSS веб-страница будет использовать шрифт sans-serif , определенный пользователем в его настройках.

Веб-шрифты

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

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

 body{ font-family: Arial;}

Ваша веб-страница будет использовать шрифт Arial при условии, что он установлен на компьютере пользователя . Если шрифт Arial недоступен на компьютере пользователя, он будет использовать шрифт с засечками браузера по умолчанию (обычно это Times).

Тем не менее,

Arial — безопасный выбор, поскольку он установлен на всех компьютерах с Windows и Mac, а также на большинстве систем Linux. Вот почему Arial считается веб-безопасным шрифтом : вы можете смело использовать его в своем CSS и быть почти уверенным, что он будет установлен на компьютере пользователя.

Есть 9 веб-безопасных шрифтов:

  • Ариал
  • Ариал Черный
  • Комик Санс MS
  • Курьер Новый
  • Грузия
  • Воздействие
  • Таймс Нью Роман
  • Требюше MS
  • Вердана

Применение списка шрифтов

Хотя использование любых из этих значений для свойства font-family является безопасной ставкой, вы можете определить резервных значений , написав список семейств шрифтов :

 body{ семейство шрифтов: Arial, Verdana, sans-serif;}

Определив несколько значений для семейства шрифтов , браузер будет искать первое значение Arial и использовать его. Если он недоступен, будет использоваться следующий Verdana . Наконец, если этот тоже недоступен, он будет использовать шрифт браузера по умолчанию без засечек.

No related posts.