Шрифты в css список: Шрифты для сайта в CSS

Основные шрифты — Как создать сайт

Безопасные шрифты на примере CSS

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

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

Шрифты в языке CSS, назначаются элементам с помощью свойства font-family.

Список безопасных шрифтов (21 штука) и их примеры:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается

Arial
Имя шрифта: font-family: Arial, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Arial Black
Имя шрифта: font-family: ‘Arial Black’, Gadget, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Bookman Old Style
Имя шрифта: font-family: ‘Bookman Old Style’, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Comic Sans MS
Имя шрифта: font-family: ‘Comic Sans MS’, cursive;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier
Имя шрифта: font-family: Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier New
Имя шрифта: font-family: ‘Courier New’, Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Garamond
Имя шрифта: font-family: Garamond, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Georgia
Имя шрифта: font-family: Georgia, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Impact
Имя шрифта: font-family: Impact, Charcoal, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Console
Имя шрифта: font-family: ‘Lucida Console’, Monaco, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Sans Unicode
Имя шрифта: font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Sans Serif
Имя шрифта: font-family: ‘MS Sans Serif’, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Serif
Имя шрифта: font-family: ‘MS Serif’, ‘New York’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Palatino Linotype
Имя шрифта: font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Symbol
Имя шрифта: font-family: Symbol, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Tahoma
Имя шрифта: font-family: Tahoma, Geneva, sans-serif;

Times New Roman
Имя шрифта: font-family: ‘Times New Roman’, Times, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Trebuchet MS
Имя шрифта: font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Verdana
Имя шрифта: font-family: Verdana, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Webdings
Имя шрифта: font-family: Webdings, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Wingdings
Имя шрифта: font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 24 октября 2014

Навигация по записям

Шрифты в CSS, их семейства и какие лучше использовать

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

Он есть в операционной системе Windows и других операционках и любой человек, который зайдет на сайт его легко прочитает, так как это шрифт «по умолчанию».

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

Наша задача изменить этот шрифт на тот, что нам больше нравится или подходит по дизайну. Для этого мы переходим в таблицу стилей и для абзацев (p) прописываем новое для нас свойство «font-family», что означает «семейство шрифтов».

p {
 font-family:
 }

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

Перейдите по этой ссылке и вы увидите список шрифтов, которые гарантированно есть в системе любого пользователя по умолчанию. Кроме того, список шрифтов есть у вас в программе «Word», если конечно вы не закачивали их туда дополнительно. При этом, мы можем указать как один шрифт, так и несколько. Причем браузер если не найдет первый указанный шрифт он станет искать второй и так далее. Также можно указать сразу семейство шрифтов, например, san-serif или cursive. К какому семейству относится тот или иной шрифт можно посмотреть там же. В итоге получается:

p {
 font-family: Arial, Tahoma, Geneva, sans-serif;
 }

Размеры шрифтов «

Теперь перейдем к размерам шрифта. Делается это с помощью свойства «font-size» и указывается размер шрифта, например 14px (пикселей). Аналогично как со шрифтами если не указать размер, то браузер по умолчанию будет использовать 16px. Размер можно задавать не только в пикселях, но и в других мерах измерения. И также приведу сразу БАЗОВЫЕ размеры.

Соответственно если вы хотите изменить размер шрифта от базового, то должны указать либо 120%, либо 2em, либо 14px, либо любое другое значение измерения, но ТОЛЬКО одно. Ну думаю тут все понятно. Я всегда использую либо % либо px. В итоге получается:

p {
 font-family: Arial, Tahoma, Geneva, sans-serif;
 font-size: 14px;
 }

Здесь же давайте рассмотрим возможность добавления курсива и жирного текста (как это сделать в html я говорил тут). За курсив отвечает свойство «font-style» (стиль шрифта), со значением «italic» (курсив). Свойство жирного шрифта — «font-weight» (насыщенность шрифта) со значением «bold» (жирный).

p {
 font-family: Arial, Tahoma, Geneva, sans-serif;
 font-size: 14px;
 font-style: italic;
 font-weight: bold;
 }

Css предоставляет еще одну интересную возможность, такое как объединение свойств, что упрощает оформление. Так как все свойства у нас относятся к шрифтам, то можно указать одно ОБЩЕЕ свойство «font» и перечислить друг за другом все его значения. Это будет то же самое но намного короче и красивее.

p {
 font: Arial, sans-serif 14px italic bold;
 }

Образцы русифицированных шрифтов. Безопасные шрифты. Примеры русифицированных шрифтов.

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

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

Примеры русифицированных шрифтов

Стили CSS

Свойство «font-family» — определяет семейство шрифта

Прописывая в коде каскадной таблицы стилей CSS свойство «font-family», мы указываем браузеру приоритетный список шрифтов. Значения «font-family» — это список, на первом месте которого стоит имя шрифта, используемого вами при создании страницы. Если на компьютере пользователя такой шрифт не установлен, то браузер ищет следующий в списке шрифт, пока не найдет подходящий. Для подразделения шрифтов используются два типа имен: имя семейства — family-name и род семейства — generic family.

Family-name – это просто имя шрифта. Например: «Arial», «Times New Roman» или» Tahoma». Generic family — это группа шрифтов, объединенных общим признаком. Пример: sans-serif, набор шрифтов без «засечек». Если браузер пользователя не найдет ни одного шрифта из вашего списка имен, он поставит какой-нибудь шрифт из семейства. Поэтому в конце списка шрифтов обязательно указывайте родовое имя.

Пример 11-1: Пропишем в таблице стили для тегов h2 и h3 Сохраним файл style. css и посмотрим, как браузер изобразил наши заголовки/

Как видите, заголовок h2 прописан шрифтом «Arial» без засечек, а h3 шрифтом «Georgia» с засечками. Обратите внимание, что «Times New Roman» мы заключили в кавычки. Запомните! Если имя шрифта состоит из нескольких слов, его нужно брать в кавычки!

Свойство «font-style» — стиль шрифта

Это свойство имеет несколько значений: normal, italic и oblique.

Пример 11-2: Давайте посмотрим, что случится с заголовками h2, h3 и h4, если мы применим к ним разные значения этого свойства.

Сохраняем нашу таблицу стилей и смотрим, как изменились заголовки.

Что мы видим? Normal — он и есть normal, т. е. ничего не изменилось. Italic и oblique отображают текст курсивом. Советую запомнить font-style: italic, если нужно какую-то часть текста отобразить курсивом.

Свойство «font-variant» — вариант шрифта

Это свойство используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы вместо букв нижнего регистра.

Пример 11-3: Чтобы было понятнее, пропишем в стили h2 и h3 одинаковые параметры кроме свойства «font-variant».

Сохраняем нашу таблицу стилей и смотрим, как изменились заголовки. В заголовке h2 вместо букв нижнего регистра используются малые заглавные буквы. Сравните знаки h2 и h2; А и а.

CSS веб-безопасные шрифты

Обычно используемые комбинации шрифтов

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

Тип шрифта вы хотите, если браузер не может быть найден, он найдет от общего типа шрифта вам нравится:

Вот некоторые часто используемые шрифты, сочетания родовых шрифтов.

Serif шрифты

Sans — шрифт с засечками

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

Вариативные шрифты • Про CSS

Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2016 года, вместе с релизом OpenType 1.8. На самом деле, работы в этом направлении велись ещё в 90-х, но только широкое использование шрифтов в вебе дало этой идее вторую жизнь и бурное развитие.

На момент написания статьи вариативные шрифты уже достаточно хорошо поддерживаются приложениями (Photoshop, Illustrator) и браузерами (Chrome, Edge, Safari, в Firefox пока за флагом и только на MacOS), а кроме того, выложено несколько свободно распространяемых демо-версий, следовательно, уже можно заняться изучением возможностей таких шрифтов и подготовиться к их использованию в реальной жизни.

Вариативные шрифты — это расширение формата OpenType, которое позволяет хранить все варианты начертаний в одном файле, а для переключения между ними использовать не только фиксированные шаги, но и промежуточные значения. Например, вместо привычных значений жирности вроде 100, 400, 700 можно будет задать 75 или 650, и так же гибко можно настроить ширину символа от самого сжатого до самого широкого задав любое значение в предопределённом диапазоне, и всё это без загрузки дополнительных файлов:

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

Настройками шрифта можно управлять с помощью CSS.

Высокоуровневые и низкоуровневые CSS-свойства

Низкоуровневые — это font-variation-settings и font-feature-settings. Их значения состоят из списка пар имён и значений, перечисленных через запятую.

Пример кода:

font-variation-settings: "wght" 1, "wdth" 200, "ital" 1, "opsz" 100;
font-feature-settings: "liga" on, "zero" on;

Высокоуровневые — это, например, font-optical-sizing, font-variant-ligatures и font-variant-numeric.

Пример кода:

font-optical-sizing: 100; 
font-variant-ligatures: common-ligatures; 
font-variant-numeric: slashed-zero; 

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

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

Доступные настройки шрифта можно воспринимать как API: можно управлять только теми, которые предопределил разработчик. Если какие-то настройки не предусмотрены, ими управлять нельзя. Следовательно, чтобы полноценно пользоваться шрифтом, нужно точно знать какие возможности в нём есть. Для определения свойств шрифта удобно использовать вот эти сервисы:

• fontdrop.info — покажет все возможности шрифта и позволит поиграться с ними вживую. Не поддерживает WOFF2.
• wakamaifondue.com — покажет возможности, живые примеры и предложит CSS. Так как он пытается показать примеры для всех настроек шрифта, на шрифтах с кучей символов и настроек страница может ощутимо тормозить. Поддерживает WOFF2.

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

font-variation-settings

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

Свойство позволяет управлять вариациями шрифта, задавать как отрисовывается глиф (наклон, толщина линий, ширина символа). Исключение составляет ital, при котором могут заменяться глифы.

В значении свойства через запятую перечисляются названия вариаций и значения для них. Названия вариаций в кавычках, названия кастомных вариаций пишутся капсом.

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

Значение по умолчанию: normal (шрифт выглядит как обычно, настройки не применяются).

Предопределённые вариации:

ital — курсив.

Пример кода:

font-variation-settings: "ital" 1;

Демо:

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

Также в этом демо можно увидеть как огругляются неподдерживаемые значения. Можно задать, например, "ital" 0.5, и оно приведётся к единице, а все меньшие значения — к нулю.

slnt — наклон.

Пример кода:

font-variation-settings: "slnt" 1;

Демо:

По идее, slnt — это наклон, а не курсив, то есть глифы не меняются, но в некоторых шрифтах такое поведение демонстрирует ital. Для демо был выбран KairosSans, в котором ital ведёт себя как slnt.

В отличие от ital, наклон может изменяться плавно.

opsz — оптический размер.

Пример кода:

font-variation-settings: "optz" 10;

Демо:

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

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

wdth — ширина

Пример кода:

font-variation-settings: "wdth" 150;

Демо:

В отличие от простой трансформации, при изменении ширины вертикальные линии сохраняют свою толщину, соотношения линий остаются прежними, и шрифт не выглядит искажённым:

Управление шириной глифа доступно во многих шрифтах.

wght — вес

Пример кода:

font-variation-settings: "wght" 900;

Демо:

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

Полный список предопределённых вариаций можно найти в спецификации OpenType, там же есть подробное описание каждой из них.

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

Например, у шрифта Decovar есть целых 15 настроек, из которых только одна стандартная — управление весом линий, в итоге из одного шрифта можно извлечь огромное количество вариантов:

В этом случае каждый отдельный стиль текста может задаваться набором значений:

font-variation-settings: "BLDA" 913.8, "BLDB" 162.8, "SKLB" 1000;

Обратите внимание, что названия кастомных меток пишутся капсом.

А у Slovic — всего одна настройка, но она позволяет плавно переключаться между предустановленными стилями:

Значения вариаций можно анимировать.

font-feature-settings

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

Эта настройка позволяет включить или выключить некоторые возможности шрифта, например, лигатуры или отображение цифр в старом стиле:

Фичи из демо:

• liga — лигатуры (когда для удобочитаемости два символа отображаются как один)
• smcp — отображение строчных как маленьких заглавных
• frac — отображение дробей
• onum — цифры в старом стиле
• zero — перечеркнутый ноль

Если фичу нужно включить, достаточно её имени, например:

font-feature-settings: "smcp", "onum";

Хотя запись типа "smcp" on помогает лучше понять что происходит в коде.

Если же нужно выключить, обязательно добавлять off:

font-feature-settings: "smcp" off, "onum" off;

Некоторые фичи включены по умолчанию, например, разные виды лигатур: clig, liga и rlig. Подробнее можно почитать в спецификации.

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

Много примеров с кодом можно найти здесь: OpenType features in CSS.

Как уже говорилось выше, font-feature-settings — это низкоуровневая настройка. Спецификация рекомендует, по возможности, использовать высокоуровневые варианты, например:

Больше вариантов можно найти в разделе спецификации Font Feature Properties.

font-feature-settings может использоваться для получения более или менее радикального варианта шрифта:

Ещё интереснее распорядился фичами автор шрифта dT Jakob Variable Concept: он сделал не только вариативный шрифт, но и слоёный, и стиль для каждого из слоёв включается с помощью лигатур:

Не уверена, что это правильное использование лигатур, но вариант, безусловно, интересный.

Использование в реальной жизни

В данный момент не все браузеры поддерживают управление вариативными шрифтами, поэтому помимо настраиваемого шрифта на страницу придётся подключать обычные. Это предлагается делать следующим образом:

@font-face {
  font-family: 'MyFontVariable';
  src: url('source-sans-variable.woff2') format('woff2');
  font-weight: 1 999;
}

@font-face {
  font-family: 'MyFont';
  src: url('source-sans-regular.woff2') format('woff2'),
         url('source-sans-regular.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont';
  src: url('source-sans-black.woff2') format('woff2'),
         url('source-sans-black.woff') format('woff');
  font-weight: 900;
}

Затем с помощью @supports определяется поддержка настроек браузерами и задаётся нужный шрифт:

html {
  font-family: 'MyFont', sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: 'MyFontVariable', sans-serif;
}
}

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

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

Как я могу узнать, какие шрифты использует сайт?

Вариант 1: использовать расширение для браузера (Easy)

Такие расширения, как WhatFont (доступны для Chrome, Firefox и Safari), позволяют довольно легко обнаруживать семейства шрифтов любого текста на веб-странице. Вам просто нужно установить расширение, активировать его на сайте и нажать на элемент, который вы хотите проверить. Результаты отображаются во всплывающем окне, всегда в выбранном вами контексте.

Вариант 2. Проверка CSS с помощью инспекторов браузера (Дополнительно)

Большинство веб-браузеров позволяют легко находить шрифты с помощью right-click→ «Проверять» или «Проверять элемент». Это также можно сделать, нажав F12. Это покажет список стилей, прикрепленных к веб-сайту, которые вы можете изучить, чтобы найти шрифты, используемые в любом элементе HTML.

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

Все стили на странице перечислены на вкладке « Стиль », но если вместо этого вы используете вкладку « Вычисленные », вы можете найти свойства, которые активно применяются к выбранному элементу, включая, конечно, семейство шрифтов.

Наконец, еще один способ быстро проверить, какие шрифты используются глобально (но НЕ как и где) — перейти к «Приложение → Кадры → Шрифты» . Там вы найдете список всех ссылочных (несистемных) шрифтов.

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

— CSS: каскадные таблицы стилей

Свойство font-family CSS определяет приоритетный список из одного или нескольких имен семейств шрифтов и / или общих имён семейств для выбранного элемента.

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

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

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

Свойство font-family определяет список шрифтов, от наивысшего до самого низкого. Выбор шрифта не останавливается на первом шрифте в списке, который находится в системе пользователя. Скорее, выбор шрифта осуществляется по одному символу за раз, , так что, если доступный шрифт не имеет глифа для необходимого символа, пробуются последние шрифты.(Однако это не работает в Internet Explorer 6 или более ранних версиях.) Если шрифт доступен только в некоторых стилях, вариантах или размерах, эти свойства также могут влиять на то, какое семейство шрифтов будет выбрано.

 
семейство шрифтов: "Gill Sans Extrabold", без засечек;
семейство шрифтов: "Goudy Bookletter 1911", без засечек;


семейство шрифтов: с засечками;
семейство шрифтов: без засечек;
семейство шрифтов: моноширинный;
семейство шрифтов: курсив;
семейство шрифтов: фантазия;
семейство шрифтов: system-ui;
семейство шрифтов: ui-serif;
семейство шрифтов: ui-sans-serif;
семейство шрифтов: ui-monospace;
семейство шрифтов: ui-Round;
семейство шрифтов: смайлики;
семейство шрифтов: математика;
семейство шрифтов: fangsong;


семейство шрифтов: наследовать;
семейство шрифтов: начальный;
семейство шрифтов: отключено;
  

Свойство font-family перечисляет одно или несколько семейств шрифтов, разделенных запятыми.Каждое семейство шрифтов определяется как значение или .

В приведенном ниже примере перечислены два семейства шрифтов, первое с , а второе с :

  семейство шрифтов: "Gill Sans Extrabold", без засечек;  

Значения

<имя-семейства>

Название семейства шрифтов. Например, «Times» и «Helvetica» - это семейства шрифтов.Имена семейств шрифтов, содержащие пробелы, должны быть заключены в кавычки. Например: «Comic Sans MS».

<общее-имя>

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

с засечками

Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или же имеют окончание с засечками.

Например: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.

без засечек

Глифы имеют простые окончания штрихов.

Например: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, без засечек.

моноширинный

Все глифы имеют одинаковую фиксированную ширину.

Например: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, моноширинный.

курсив

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

Например: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, курсив.

фантазия

Шрифты

Fantasy - это в первую очередь декоративные шрифты, содержащие игровые изображения персонажей.

Например: Папирус, Геркуланум, Партия LET, Curlz MT, Харрингтон, фэнтези.

системный интерфейс

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

ui-serif

Шрифт с засечками в пользовательском интерфейсе по умолчанию.

ui-sans-serif

Шрифт без засечек пользовательского интерфейса по умолчанию.

ui-monospace

Моноширинный шрифт пользовательского интерфейса по умолчанию.

ui-округленное

Шрифт пользовательского интерфейса по умолчанию с закругленными элементами.

математика

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

смайликов

Шрифты, специально разработанные для отображения эмодзи.

Фангсонг

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

Допустимые имена семейств

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

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

Например, действительны следующие декларации:

  семейство шрифтов: "Goudy Bookletter 1911", без засечек;  

Следующие объявления недействительны :

  семейство шрифтов: Goudy Bookletter 1911, без засечек;
семейство шрифтов: красный / черный, без засечек;
семейство шрифтов: "Lucida" Grande, без засечек;
семейство шрифтов: Кхм !, без засечек;
семейство шрифтов: test @ foo, sans-serif;
семейство шрифтов: #POUND, без засечек;
семейство шрифтов: Гавайи 5-0, без засечек;  

Следующий пример технически действителен , но не рекомендуется:

  семейство шрифтов: Gill Sans Extrabold, без засечек;
  

Некоторые распространенные семейства шрифтов

 .serif {
  семейство шрифтов: Times, Times New Roman, Georgia, serif;
}

.без засечек {
  семейство шрифтов: Verdana, Arial, Helvetica, без засечек;
}

.monospace {
  семейство шрифтов: "Lucida Console", Courier, моноширинный;
}

.cursive {
  семейство шрифтов: курсив;
}

.фантазия {
  семейство шрифтов: фантазия;
}

.emoji {
  семейство шрифтов: смайлики;
}

.math {
  семейство шрифтов: математика;
}

.fangsong {
  семейство шрифтов: fangsong;
}
  

таблицы BCD загружаются только в браузере

CSS безопасных веб-шрифтов - узнайте, как безопасно использовать шрифты на веб-сайтах

Веб-безопасные шрифты - это шрифты, которые чрезвычайно распространены и, скорее всего, присутствуют в широком спектре операционных систем, таких как Windows, Mac, Linux и т. Д.

Почему выбирают безопасные веб-шрифты

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

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

Вы всегда должны заканчивать список общим семейством шрифтов, которое составляет пять: serif , sans-serif , monospace , cursive и fantasy . Общее семейство шрифтов позволяет браузеру выбрать аналогичный шрифт, если шрифты, определенные вами, недоступны.

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

В следующем примере показано, как правильно установить свойство font-family font-family.

  .sans-serif-font {
    семейство шрифтов: Arial, Helvetica, sans-serif;
}
.serif-font {
    семейство шрифтов: "Times New Roman", Times, serif;
}
.monospace-font {
    семейство шрифтов: "Courier New", Courier, моноширинный;
}  

Часто используемые сочетания шрифтов

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

Шрифты с засечками

Шрифты без засечек

Моноширинные шрифты

Курсивные шрифты

Фэнтезийные шрифты

Не существует фантастических шрифтов, которые были бы хорошо доступны в браузерах и операционных системах.

Предупреждение: Шрифты (Verdana, Georgia, «Comic Sans MS», «Trebuchet MS», «Arial Black», Impact) работают в Windows и MacOS, но не в Unix + X.

Список семейств шрифтов CSS - Примеры

семейство шрифтов: Семейство шрифтов Times New Roman: «Times New Roman», Times, serif;

семейство шрифтов: Семейство шрифтов Arial: "Arial", Times, serif;

семейство шрифтов: Семейство шрифтов Arial Black: «Arial Black», Times, serif;

семейство шрифтов: Семейство шрифтов Comic Sans MS: «Comic Sans MS», Times, serif;

семейство шрифтов: Семейство шрифтов Constantia: "Constantia", Times, serif;

семейство шрифтов: Семейство шрифтов Courier: "Courier", Times, serif;

семейство шрифтов: Семейство шрифтов Ebrima: "Ebrima", Times, serif;

семейство шрифтов: Семейство шрифтов Impact: "Impact", Times, serif;

font-family: Ink Free font-family: "Ink Free", Times, serif;

 г {
 семейство шрифтов: Georgia, Times, Times New Roman, с засечками;
} 

 с засечками 

 без засечек 

 моноширинный 

 курсив 

 фантазия 

 
 Фонтан
со сломанным знаком на нем  действительно  сломано.