Font шрифт: Шрифты Онлайн — красивые шрифты

Шрифт 

font | CSS | WebReference

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

Краткая информация

Значение по умолчаниюЗависит от использования
НаследуетсяДа
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис

font: [font-style||font-variant||font-weight||font-stretch] font-size [/line-height] font-family
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

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

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

Пример

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>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font

Объектная модель

Объект.style.font

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

СпецификацияСтатус
CSS Fonts Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

4121
6		11
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Текст и шрифт

См. также

  • Сокращённое свойство font

font-family — CSS — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Значения
  6. Ещё пример
  7. Подсказки
  8. На практике
    1. Алёна Батицкая советует

Кратко

Скопировано

С помощью font-family можно задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например «Arial». А можно задать желаемый тип шрифта: например, с засечками serif или без засечек

sans-serif.

Пример

Скопировано

Допустим, мы хотим, чтобы текст был набран шрифтом PT Sans. Если такой шрифт не установлен у пользователя, то пускай откроется в Arial. Если и такого нет, то пусть будет стандартный шрифт без засечек:

body {  font-family: "PT Sans", "Arial", sans-serif;}
          body {
  font-family: "PT Sans", "Arial", sans-serif;
}

Как понять

Скопировано

«PT Sans», «Arial», «Times New Roman» — это примеры семейств шрифтов. С помощью

font-family можно задать любой шрифт для любого текстового элемента на странице.

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

Как пишется

Скопировано

Обычно в font-family задают сразу несколько шрифтов, перечисляя их через запятую. На первом месте ставят самый редкий шрифт из тех, что хотят использовать для этого элемента. Затем — похожий, но более распространённый шрифт.

В самом конце — желаемый тип шрифта. Браузер проходит по списку слева направо и использует первый найденный на компьютере шрифт.

Значения

Скопировано

  • Имя шрифта — шрифт, который будет использоваться на странице. Например, Times или Helvetica.
  • Семейство шрифтов — прописывается последним на случай, если ни одного из шрифтов нет на компьютере пользователя:
    • serif — шрифт с засечками, например, «Times».
    • sans-serif — шрифт без засечек, например, «Arial».
    • monospace — моноширинные шрифты с одинаковой шириной каждого символа. Похожи на текст, набранный на печатной машинке. Например, шрифт «Courier».
    • cursive — курсивный шрифт или italic.
    • fantasy — декоративный шрифт.
    • system-ui — использует стандартный шрифт на устройстве пользователя.

Ещё пример

Скопировано

Зададим разные шрифты для заголовков и для основного текста:

<h2>Этот заголовок написан шрифтом Roboto без засечек</h2><p>А параграф — шрифтом Roboto Slab с засечками. </p><div>  <h3>Для второго заголовка установлено семейство sans-serif</h3>  <p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками,    установленный в системе по умолчанию.</p></div>
          <h2>Этот заголовок написан шрифтом Roboto без засечек</h2>
<p>А параграф — шрифтом Roboto Slab с засечками.</p>
<div>
  <h3>Для второго заголовка установлено семейство sans-serif</h3>
  <p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками,
    установленный в системе по умолчанию.</p>
</div>

h2 {  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;}p {  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;}.generic h3 {  font-family: sans-serif;}.generic p {  font-family: serif;}
          h2 {
  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;
}
p {
  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;
}
. generic h3 {
  font-family: sans-serif;
}
.generic p {
  font-family: serif;
}
Открыть демо в новой вкладке

Подсказки

Скопировано

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

💡 Не забывай добавлять желаемый тип шрифта (serif, sans-serif или другой), так как нет гарантий, что нужный вам шрифт найдётся на компьютере пользователя.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Если в макете используется один из нестандартных шрифтов, то вам потребуется подключить его в свою вёрстку при помощи свойства @font-face.

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

  • Кастомный шрифт;
  • Стандартный системный шрифт;
  • Семейство шрифтов.

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

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

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

color

ctrl + alt + ←

→

font-size

ctrl + alt + →

новых шрифтов 🕓 Свежие загрузки каждый день

Новые популярные случайные Коммерческие

В алфавитном порядке

По годам

Коммерческие

Личное использование Бесплатно

Личное использование Бесплатно

Личное использование Бесплатно

Личное использование Бесплатно

Личное использование Бесплатно

Личное использование Бесплатно

Личное использование Бесплатно

Личное использование Бесплатно

Личное использование Бесплатно

100% Бесплатно

Личное использование Бесплатно

Личное использование Бесплатно

Личное использование Бесплатно

от 1 до 15 из 1000 результатов

  • 1
  • 2
  • 3
  • 4
  • Далее
9 0080 Связанные стили шрифтов
  • Классный
  • Каллиграфия
  • Курсив
  • Необычный
  • Надпись
  • Рукопись
  • Рукописный ввод
  • Милый
  • Sans Serif
  • Serif
  • Bold
  • Modern
  • Fun
    9007 0
  • Ретро
  • Винтаж
  • Надпись от руки
  • Логотип
  • Свадьба
  • Кисть
  • Signature
  • Elegant
  • Декоративный
  • Дети
  • Плакат
  • Мультфильм
  • Красивый
  • Рисованной
    • 9 0069
    Ручная работа
  • Дисплей
  • Брендинг
  • Логотип
  • Приглашение
  • Дингбаты
  • Футуристический
  • Техно
  • Научная фантастика
  • Девчачий
  • Игривый
  • Стильный

Шрифты для рабочего стола, печати, электронных книг, приложений и веб-публикаций

85 k Шрифты
500+ бесплатных шрифтов
Без НДС или налога с продаж
Без налога* или НДС взимается

Нет налога* или НДС

  • Новые шрифты
  • Специальные предложения
  • Наборы шрифтов
  • В тренде
  • Категории шрифтов

$39,00

Вес, стили и многое другое