Шрифты в css список: описание доступных общих имен, примеры применения

CSS: шрифты

Смотрите также указатель всех приёмов работы.

На этой странице:

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

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

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy

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

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

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

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

описание доступных общих имен, примеры применения

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

body { font-family: Arial, Helvetica, sans-serif; }

Единственное объявление в приведенном выше правиле — это то, что обычно называют стеком шрифтов. Эта строка определяет шрифт, который браузер должен использовать для указанного элемента (в данном случае для элемента body). Стек — «Arial, Helvetica, sans-serif». Это дает указание браузеру выполнить следующие действия:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Найти шрифт под названием «Arial», определенный в CSS, загруженном на страницу, используя @font-face или в операционной системе пользователя. Если этот шрифт найден, использовать его как шрифт для указанного элемента (ов).

Если Arial не найден, найти шрифт под названием «Helvetica» в тех же местах. Если он найден, использовать его.

Если Helvetica не найден, использовать любой шрифт в качестве шрифта sans-serif по умолчанию в браузере пользователя или операционной системе.

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

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

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

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

serif

sans-serif

cursive

fantasy

monospace

Семейство serif хорошо известно, но обратите внимание на то, что спецификация говорит: «Шрифты Serif представляют собой формальный стиль текста для скрипта. Это часто, но не всегда, глифы, которые имеют завершающие штрихи, свисающие или сужающиеся концы или имеют фактические засечные окончания (включая прямоугольные засечки)»

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

Для шрифтов sans-serif, спецификация говорит: «Символы в шрифтах sans-serif, поскольку термин используется в CSS, обычно имеют низкую контрастность (вертикальные и горизонтальные стержни имеют почти одинаковую толщину) и имеют конечные прямые окончания — без каких-либо свисающих элементов, пересечения центральной линии и других орнаментов.»

Таким образом, в этом случае ожидается, что шрифт не будет иметь засечек.

Моноширинные шрифты имеют более простое определение: «Единственным критерием моноширинного шрифта является то, что все глифы имеют одинаковую фиксированную ширину.»

Хотя эти три семейства довольно распространены, вы, возможно, не слишком знакомы с cursive и fantasy.

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

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

Точно так же fantasy описывается как: «Прежде всего декоративные или выразительные шрифты, которые содержат декоративные или выразительные представления символов.»

Некоторые примеры fantasy шрифтов показаны на следующем изображении, взятом из спецификации:

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

Откуда берутся общие шрифты?

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

Как вы, вероятно, знаете, следующий CSS отлично работает:

body { font-family: monospace; }

В приведенном выше коде я не использую стек; Я говорю браузеру использовать универсальный моноширинный шрифт как единственный вариант шрифта. Это прекрасно, хотя это далеко не идеально.

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

В Chrome пользователь может это сделать, выбрав «Настройки — Внешний вид» — «Настроить шрифты». Там пользователь увидит следующие варианты:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Как видно, Chrome позволяет пользователю изменять шрифт по умолчанию для трех общих категорий шрифтов: serif, sans-serif и monospace (т.е. фиксированная ширина). Как видно из изображения, на моей машине с Windows я заменил шрифт с засечками на Georgia и моноширинный на Consolas.

У Firefox есть аналогичная опция в настройках (Перейти к: Параметры — Язык и внешний вид — Шрифты и цвета — Дополнительно):

Как и в Chrome, пользовательский интерфейс Firefox не позволяет вам изменять шрифт по умолчанию для fantasy или cursive. Однако Firefox позволяет вам изменить любой из них через about:config. Вы можете получить к нему доступ, введя about:config в адресной строке и принимая странное сообщение «Это может аннулировать вашу гарантию!». Как только вы попадете на экран с настройками, вы можете найти строку font.name-list.cursive в поиска, и вы увидите следующее:

Эти значения определяют cursive настройки шрифта для разных наборов символов. Для английских пользователей я считаю, что единственное, что нужно изменить, это font.name-list.cursive.x-western. Пользователь может установить это значение для имени любого допустимого шрифта, установленного в операционной системе. Если указанный шрифт не найден, браузер будет использовать шрифт по умолчанию (не стандартный cursive, а шрифт по умолчанию).

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

Что касается IE11 и Edge, единственный способ, с помощью которого я мог бы изменить шрифт по умолчанию в Edge — это войти в настройку «Свойства обозревателя» на панели управления Windows. Оттуда вы можете внести некоторые изменения в браузере, используя разделы «Шрифты» и «Доступность» на вкладке «Общие». Но я не вижу способа изменить какие-либо общие категории шрифтов — даже serif, sans-serif или monospace, что немного раздражает. Поэтому я, скорее всего, не воспользуюсь таким браузером.

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

Какие общие шрифты по умолчанию?

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

Обычно на ПК общие шрифты могут выглядеть так:

serif — Times New Roman

sans-serif — Arial

monospace — Курьер New

cursive — Comic Sans MS (да, действительно)

fantasy – Impact

system-ui – Segoe UI

На моей машине Mac есть следующее (вы можете получить несколько разных результатов):

serif — Times

sans-serif — Helvetica

monospace — Courier

cursive — Apple Chancery

fantasy — Papyrus

system-ui — .SF NS Text

Как видно, шрифты, которые эти общие ключевые слова указывают по умолчанию, невелики (особенно в Windows). Фактически, из-за того, что Comic Sans MS является стандартным курсорным шрифтом на большинстве машин Windows, я бы сказал, что довольно сложно использовать cursive в качестве ключевого слова generic. К сожалению, кажется, что не так много cursive шрифтов, которые являются общими для Windows и Mac, поэтому работать с резервными шрифтами на основе cursive непросто. Но опять же, это, вероятно, не так уж важно, если ваш основной выбор шрифтов является надежным.

Новые общие имена шрифтов в CSS Fonts Level 4

Вскоре CSS Fonts Module Level 4 введет следующие новые дополнения к общим категориям шрифтов:

system-ui — Спецификация объясняет: «Это семейство типичных шрифтов предназначено, чтобы позволить текстовому рендерингу с шрифтом пользовательского интерфейса по умолчанию на платформе, на которой работает UA … Целью system-ui является разрешить веб-контенту интегрироваться с внешним видом родного приложения». Поддерживается в браузерах WebKit.

emoji — Предназначен для использования с символами emoji. Firefox поддерживает это ключевое слово, и вы можете определить стандартный font.name-list.emoji по умолчанию, используя font.name-list.emoji в config.

math — Предназначен для использования с математическими выражениями.

fangsong — Используется для песенных шрифтов на китайском языке.

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

Заключение

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

Но, как и любая технология веб-разработки, нужно хорошо знать все эти особенности CSS. Если у вас есть что добавить, сообщите мне, и я обновлю статью.

Автор: Louis Lazaris

Источник: https://www.impressivewebs.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

CSS: Стандартные (безопасные) шрифты

В интернете исторически сложилось такое понятие как «безопасные» Web-шрифты. Безопасным шрифтом можно назвать такой шрифт, который поддерживается операционной системой пользователя с очень высокой степенью вероятности. Поскольку о таком положении дел остаётся только мечтать, то абсолютно безопасных шрифтов не существует!

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространённой операционной системы — Windows, которые кроме того используются в других ОС:

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

Шрифты без засечек — Sans-Serif

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

С этой темой смотрят:

CSS Веб шрифты

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

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

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

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

Шрифт Serif

Шрифты Sans-Serif

Шрифты Monospace

Совет: Также проверить все доступные Google Шрифты и как ими пользоваться.

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

Безопасные шрифты на примере 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), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).

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;
Цифры: 0 1 2 3 4 5 6 7 8 9

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

Каскадные таблицы стилей предоставляют целый ряд свойств шрифтов, которые непосредственно влияют на отображение текста. Свойство CSSfont family определяет, какое семейство шрифтов использовать.

Шрифты группируются по 5 типам:

• serif — шрифты имеют небольшие засечки на окончаниях линий каждого символа;
• sans-serif;
• monospace;
• cursive;
• fantasy;

cursive и fantasy никогда не используются.

Поскольку свойство CSS font family наследуется всеми дочерними элементами HTML, — можно применить шрифт ко всей веб-странице, задав его для элемента <body>.

body{ font-family: sans-serif;}

В этом примере на веб-странице в качестве приоритетного будет использоваться шрифт sans-serif.

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

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

body{ font-family: Arial;}

Для веб-страницы будет использоваться CSS font family Arial, но при условии, что он установлен на компьютере пользователя. Иначе будет использоваться заданный по умолчанию для браузера шрифт типа serif (как правило, это Times).

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

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

• Arial;
• Arial Black;
• Comic Sans MS;
• Courier New;
• Georgia;
• Impact;
• Times New Roman;
• Trebuchet MS;
• Verdana.

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

body{ font-family: Arial, Verdana, sans-serif;}

В этом примере мы указываем браузеру искать первое значение CSS font family Arial и использовать его. Если этот шрифт недоступен, программа будет использовать Verdana. И, наконец, если он не доступен, то будет использовать шрифт по умолчанию sans-serif.

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

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

Данная публикация представляет собой перевод статьи «Choosing a font» , подготовленной дружной командой проекта Интернет-технологии.ру

Шрифты CSS — Программирование с нуля

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

Свойства шрифта

CSS предоставляет несколько свойств для стилизации шрифтов, таких как: font-family, font-style, font-option, font-weight и font-size. В следующем разделе описывается каждое из этих свойств.

Семейство шрифтов (font-family)

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

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

p {
  font-family: "Times New Roman", Times, serif;
}

Если имя семейства шрифтов содержит более одного слова, оно должно быть заключено в кавычки, такие как «Times New Roman», «Courier New», «Trebuchet MS» и т.д.

Стиль шрифта

Свойство font-style устанавливает стиль шрифта. Возможные значения этого свойства: нормальное (normal), курсивное (italic) или наклонное (oblique).

p.one {
  font-style: normal;
}
p.two {
  font-style: italic;
}
p.three {
  font-style: oblique;
}

Размер шрифта

Свойство font-size устанавливает размер шрифта для текстового содержимого элемента.

Есть несколько способов указать значения размера шрифта, например, при помощи ключевых слов, пикселей (px) или em.

Установка размера шрифта с помощью ключевых слов

Установив размер шрифта при помощи ключевого слова в элементе body, вы можете установить относительный размер шрифта повсюду на странице, что дает вам возможность легко масштабировать шрифт. Абсолютный размер указывается с использованием одного из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large.

Относительный размер указывается с помощью одного из следующих ключевых слов: smaller, larger.

body {
  font-size: large;
}
h2 {
  font-size: larger;
}
p {
  font-size: smaller;
}

Однако этот способ не рекомендуется использовать. Давайте рассмотрим как можно установить размер шрифта при помощи px и em.

Установка размера шрифта в пикселях

Установка размера шрифта в пикселях (например, 12px, 16px и т.д.) является приоритетным, когда вам нужна точность до пикселей. Тем не менее, результаты могут варьироваться в разных браузерах, так как они используют разные алгоритмы для достижения аналогичного эффекта.

h2 {
  font-size: 24px;
}
p {
  font-size: 14px;
}

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

Установка размера шрифта с помощью Em

Единица em относится к размеру шрифта родительского элемента.

Размер значения em является динамическим. При определении свойства font-size, em равно размеру шрифта, который применяется к родительскому элементу.

Если вы установите размер шрифта 20px для элемента body, то 1em = 20px и 2em = 40px.

Если вы нигде не указали размер шрифта на странице, то будет использоваться размер, который установлен в браузере по умолчанию, обычно он составляет 16 пикселей. Итак, по умолчанию 1em = 16px, а 2em = 32px.

h2 {
  font-size: 2em; /* 32px/16px=2em */
}
p {
  font-size: 0.875em; /* 14px/16px=0.875em */
}

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

Свойство font-weight указывает толщину или жирность шрифта.

Возможные значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 и inherit.

p {
  font-weight: bold;
}

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

CSS:

См. Также указатель всех подсказок.

На этой странице:

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

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

Так как не все шрифты доступны на всех компьютерах (есть тысячи шрифтов, и большинство из них платные), CSS предоставляет систему откатов. Сначала вы указываете нужный шрифт, а затем любые шрифты который может заменить первый, если он недоступен, и вы должен заканчивать список общим шрифтом , из которых пять: с засечками, без засечек, моноширинный, курсив и фэнтези.

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

Стили шрифта

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

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

Модуль CSS Fonts имеет дополнительные свойства, которые можно указать стили (для шрифтов с несколькими вариантами), в частности Свойство font-variant имеет гораздо больше значений.

CSS веб-шрифтов

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

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

Начните с желаемого шрифта и закончите общим семейством, чтобы браузер выбирает аналогичный шрифт из общего семейства, если другие шрифты не в наличии:

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

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

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

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

Совет: Также проверьте все доступные шрифты Google и способы их использования.

font-family — Веб-технологии для разработчиков

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

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

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

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

Синтаксис

 / * Название семейства шрифтов и общее название семейства * /
семейство шрифтов: Gill Sans Extrabold, sans-serif;
семейство шрифтов: "Goudy Bookletter 1911", без засечек;

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

/ * Глобальные значения * /
семейство шрифтов: наследование;
семейство шрифтов: начальный;
семейство шрифтов: отключено;
 

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

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

: Gill Sans Extrabold, sans-serif; 

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

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

 [<имя-семейства> | ] # 
, где 
   =  |  + 
  = serif | без засечек | курсив | фантазия | моноширинный  
 

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

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

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

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

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

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

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

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

 

  Это пример шрифта с засечками.



  Это пример шрифта без засечек.


  Это пример моноширинного шрифта.



  Это пример курсивного шрифта.



  Это пример фантастического шрифта.



  Это пример математического шрифта.



  Это пример шрифта эмодзи.



  Это пример шрифта fangsong.