Содержание

CSS: шрифты

CSS: шрифты

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

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

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

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

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

.

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

‘sans-serif’: обычные шрифты без засечек
Arial, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Helvetica, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Verdana, sans-serif
Съешь же ещё этих мягких французских булок да выпей чаю
Trebuchet MS, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Gill Sans, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Noto Sans, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif
Съешь же ещё этих мягких французских булок да выпей чаю
Arial Narrow, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
‘serif’: обычные шрифты с засечками
Times, Times New Roman, serif Съешь же ещё этих мягких французских булок да выпей чаю
Georgia, serif Съешь же ещё этих мягких французских булок да выпей чаю
Palatino, URW Palladio L, serif Съешь же ещё этих мягких французских булок да выпей чаю
Bookman, URW Bookman L, serif Съешь же ещё этих мягких французских булок да выпей чаю
New Century Schoolbook, TeX Gyre Schola, serif Съешь же ещё этих мягких французских булок да выпей чаю
serif
Съешь же ещё этих мягких французских булок да выпей чаю
‘monospace’: шрифты фиксированной ширины
Andale Mono, monospace Съешь же ещё этих мягких французских булок да выпей чаю
Courier New, monospace Съешь же ещё этих мягких французских булок да выпей чаю
Courier, monospace Съешь же ещё этих мягких французских булок да выпей чаю
FreeMono, monospace
Съешь же ещё этих мягких французских булок да выпей чаю
DejaVu Sans Mono, monospace Съешь же ещё этих мягких французских булок да выпей чаю
monospace Съешь же ещё этих мягких французских булок да выпей чаю
‘cursive’: шрифты, имитирующие почерк
Comic Sans MS, Comic Sans, cursive Съешь же ещё этих мягких французских булок да выпей чаю
Bradley Hand, cursive
Съешь же ещё этих мягких французских булок да выпей чаю
Brush Script MT, Brush Script Std, cursive Съешь же ещё этих мягких французских булок да выпей чаю
Snell Roundhand, cursive Съешь же ещё этих мягких французских булок да выпей чаю
URW Chancery L, cursive Съешь же ещё этих мягких французских булок да выпей чаю
cursive Съешь же ещё этих мягких французских булок да выпей чаю
‘fantasy’: декоративные шрифты, для названий и т.д..
Impact, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Luminari, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Marker Felt, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Trattatello, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
fantasy Съешь же ещё этих мягких французских булок да выпей чаю

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

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

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

правило serif sans-serif
Стили
font-style: normal Съешь же… Съешь же…
font-style: italic Съешь же… Съешь же…
font-style: oblique Съешь же… Съешь же…
Насыщенность шрифта
font-weight: 100 Съешь же… Съешь же…
font-weight: 200 Съешь же… Съешь же…
font-weight: 300 Съешь же… Съешь же…
font-weight: normal Съешь же… Съешь же…
font-weight: 500 Съешь же… Съешь же…
font-weight: 600 Съешь же… Съешь же…
font-weight: bold
Съешь же… Съешь же…
font-weight: 800 Съешь же… Съешь же…
font-weight: 900 Съешь же… Съешь же…
Варианты
font-variant: normal Съешь же… Съешь же…
font-variant: small-caps Съешь же… Съешь же…
Растяжение
font-stretch: ultra-condensed
Съешь же… Съешь же…
font-stretch: extra-condensed Съешь же… Съешь же…
font-stretch: condensed Съешь же… Съешь же…
font-stretch: semi-condensed Съешь же… Съешь же…
font-stretch: normal Съешь же… Съешь же…
font-stretch: semi-expanded Съешь же… Съешь же…
font-stretch: expanded Съешь же… Съешь же…
font-stretch: extra-expanded Съешь же… Съешь же…
font-stretch: ultra-expanded Съешь же… Съешь же…

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

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

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

Подробный разбор общих семейств шрифтов в CSS

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

 

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

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

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

Подробный разбор общих семейств шрифтов в CSS

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 шрифтов показаны на следующем изображении, взятом из спецификации:

Подробный разбор общих семейств шрифтов в CSS

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

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

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

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

body { font-family: monospace; }

body {

  font-family: monospace;

}

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

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

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

Подробный разбор общих семейств шрифтов в CSS

Подробный разбор общих семейств шрифтов в CSS

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

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

Узнать подробнее

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

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

Подробный разбор общих семейств шрифтов в CSS

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

Подробный разбор общих семейств шрифтов в CSS

Эти значения определяют 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.

Подробный разбор общих семейств шрифтов в CSS

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

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

Узнать подробнее Подробный разбор общих семейств шрифтов в CSS

PSD to HTML

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

Смотреть

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

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

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

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

font-family Пример
Georgia, serif

Это заголовок

Это абзац

«Palatino Linotype», «Book Antiqua», Palatino, serif

Это заголовок

Это абзац

«Times New Roman», Times, 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

Это заголовок

Это абзац

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

font-family Пример
«Courier New», Courier, monospace

Это заголовок

Это абзац

«Lucida Console», Monaco, monospace

Это заголовок

Это абзац

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

CSS Веб шрифты


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

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

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

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


Шрифт Serif

font-family Пример текста
Georgia, serif

Это заголовок

Это параграф

«Palatino Linotype», «Book Antiqua», Palatino, serif

Это заголовок

Это параграф

«Times New Roman», Times, 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

Это заголовок

Это параграф

Шрифты Monospace

font-family Пример text
«Courier New», Courier, monospace

Это заголовок

Это параграф

«Lucida Console», Monaco, 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 позволяют вам устанавливать различные стили для шрифтов, такие как семейство шрифтов, размер и жирность, вариант и т.д.

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

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 предоставляет систему откатов. Сначала вы указываете нужный шрифт, а затем любые шрифты который может заменить первый, если он недоступен, и вы должен заканчивать список общим шрифтом , из которых пять: с засечками, без засечек, моноширинный, курсив и фэнтези.

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

Семейство шрифтов Ваш браузер Пример изображения
‘sans-serif’: обычные шрифты без засечки
Arial, без засечек Быстрая коричневая лисица Прыгает через ленивую собаку
Helvetica, без засечек Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Verdana, без засечек Быстрая коричневая лисица Прыгает через ленивую собаку
Trebuchet MS, без засечек Быстрый Коричневая лиса перепрыгивает через ленивую собаку
Gill Sans, без засечек Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Noto Sans, без засечек Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Avantgarde, TeX Gyre Adventor, URW Gothic L, без засечек Быстрая коричневая лисица перепрыгивает через ленивую собаку
Optima, без засечек Быстрая коричневая лисица Прыгает через ленивую собаку
Arial Narrow, без засечек Быстрый Коричневая лиса перепрыгивает через ленивую собаку
без засечек Быстрые прыжки коричневой лисы Над ленивым псом
‘serif’: обычные шрифты с засечками
Times, Times New Roman, с засечками Быстрый Коричневая лиса перепрыгивает через ленивую собаку
Didot, с засечками Быстрые прыжки коричневой лисы Над ленивым псом
Джорджия, с засечками Быстрая коричневая лисица Прыгает через ленивую собаку
Palatino, URW Palladio L, serif Быстрая коричневая лиса перепрыгивает через ленивую собаку
Bookman, URW Bookman L, с засечками Быстрый Коричневая лиса перепрыгивает через ленивую собаку
New Century Schoolbook, TeX Gyre Schola, serif Быстрая коричневая лисица перепрыгивает через ленивую собаку
Американская пишущая машинка, с засечками Быстрый Коричневая лиса перепрыгивает через ленивую собаку
с засечками Быстрая коричневая лисица перепрыгивает Ленивая собака
‘моноширинный’: шрифты фиксированной ширины
Andale Mono, моноширинный Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Courier New, моноширинный Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Courier, моноширинный Быстрая коричневая лисица Прыгает через ленивую собаку
FreeMono, моноширинный Быстрая коричневая лисица Прыгает через ленивую собаку
OCR A Std, моноширинный Быстрый коричневый Лиса перепрыгивает через ленивую собаку
DejaVu Sans Mono, моноширинный Быстрый Коричневая лиса перепрыгивает через ленивую собаку
моноширинный Быстрые прыжки коричневой лисы Над ленивым псом
‘cursive’: шрифты, имитирующие почерк.
Comic Sans MS, Comic Sans, курсив Быстрая коричневая лиса перепрыгивает через ленивую собаку
Apple Chancery, курсив Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Bradley Hand, курсив Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Brush Script MT, Brush Script Std, курсив Быстрая коричневая лисица перепрыгивает через ленивую собаку
Snell Roundhand, курсив Быстрый Коричневая лиса перепрыгивает через ленивую собаку
URW Chancery L, курсив Быстрый коричневый Лиса перепрыгивает через ленивую собаку
курсив Быстрая коричневая лисица перепрыгивает Ленивая собака
«фантазия»: декоративные шрифты, для заголовков и т. Д.
Удар, фантазия Быстрая коричневая лисица Прыгает через ленивую собаку
Luminari, фэнтези Быстрая коричневая лисица Прыгает через ленивую собаку
Мел, фантазия Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Jazz LET, фэнтези Быстрая коричневая лисица Прыгает через ленивую собаку
Блиппо, фэнтези Быстрая коричневая лисица Прыгает через ленивую собаку
Stencil Std, фэнтези Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Маркер Felt, фэнтези Быстрый коричневый Лиса перепрыгивает через ленивую собаку
Траттателло, фэнтези Быстрый коричневый Лиса перепрыгивает через ленивую собаку
фантазия Быстрая коричневая лисица перепрыгивает Ленивая собака

Стили шрифта

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

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

Правило
с засечками без засечек
Стили
стиль шрифта: обычный Быстрый… Быстрый…
Стиль шрифта: курсив Быстрый… Быстрый…
стиль шрифта: наклонный Быстрый… Быстрый…
Масса
font-weight: 100 Быстрый… Быстрый…
font-weight: 200 Быстрый… Быстрый…
font-weight: 300 Быстрый… Быстрый…
font-weight: normal Быстрый… Быстрый…
font-weight: 500 Быстрый… Быстрый…
font-weight: 600 Быстрый… Быстрый…
font-weight: жирный Быстрый… Быстрый…
font-weight: 800 Быстрый… Быстрый…
вес шрифта: 900 Быстрый… Быстрый…
Варианты
вариант шрифта: нормальный Быстрый… Быстрый…
вариант шрифта: small-caps Быстрый… Быстрый…
Растяжка
font-stretch: сверхконденсированный Быстрый… Быстрый…
font-stretch: сверхконденсированный Быстрый… Быстрый…
font-stretch: сжатый Быстрый… Быстрый…
font-stretch: полусконденсированный Быстрый… Быстрый…
font-stretch: обычный Быстрый… Быстрый…
font-stretch: полуразвернутый Быстрый… Быстрый…
font-stretch: расширенный Быстрый… Быстрый…
font-stretch: сверхрасширенный Быстрый… Быстрый…
font-stretch: сверхрасширенный Быстрый… Быстрый…

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

.

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


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

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

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

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


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

семейство шрифтов Пример текста
Грузия, с засечками

Это заголовок

Это абзац

«Palatino Linotype», «Book Antiqua», Palatino, serif

Это заголовок

Это абзац

«Times New Roman», Times, с засечками

Это заголовок

Это абзац



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

семейство шрифтов Пример текста
Arial, Helvetica, без засечек

Это заголовок

Это абзац

«Arial Black», гаджет, без засечек

Это заголовок

Это абзац

«Comic Sans MS», курсив, без засечек

Это заголовок

Это абзац

Impact, уголь, без засечек

Это заголовок

Это абзац

«Lucida Sans Unicode», «Lucida Grande», без засечек

Это заголовок

Это абзац

Тахома, Женева, без засечек

Это заголовок

Это абзац

«Trebuchet MS», Helvetica, без засечек

Это заголовок

Это абзац

Verdana, Женева, без засечек

Это заголовок

Это абзац

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

семейство шрифтов Пример текста
«Курьер Новый», Курьер, моноширинный

Это заголовок

Это абзац

«Lucida Console», Монако, моноширинный

Это заголовок

Это абзац

Совет: Также проверьте все доступные шрифты 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; 

Значения

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

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

с засечками
Глифы имеют завершающие штрихи, расклешенные или сужающиеся концы или же имеют окончание с засечками.
Например. Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", засечки.
без засечек
Глифы имеют простые окончания штрихов.
Например. «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», Монако, «Lucida Console», моноширинный.
курсив
Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие характеристики курсива помимо таковых у курсивного шрифта. Глифы частично или полностью связаны, и результат больше похож на рукописный текст ручкой или кистью, чем на печатные буквы.
Например. «Brush Script MT», «Brush Script Std», «Lucida Calligraphy», «Lucida Handwriting», «Apple Chancery», курсив.
фантазия
Фэнтезийные шрифты - это прежде всего декоративные шрифты, которые содержат игровые изображения персонажей.
Например. Папирус, Herculanum, Party LET, Curlz MT, Harrington, фэнтези.
системный интерфейс
Глифы берутся из шрифта пользовательского интерфейса по умолчанию на данной платформе. Поскольку типографские традиции сильно различаются по всему миру, этот универсальный шрифт предназначен для гарнитур, которые не полностью соответствуют другим универсальным шрифтам. Это пример текста системного интерфейса.
ui-serif
Шрифт с засечками в пользовательском интерфейсе по умолчанию. Это пример текста ui-serif.
ui-sans-serif
Шрифт без засечек пользовательского интерфейса по умолчанию. Это пример текста ui-sans-serif.
ui-monospace
Моноширинный шрифт пользовательского интерфейса по умолчанию. Это пример текста в моноширинном интерфейсе.
ui-округленное
Шрифт пользовательского интерфейса по умолчанию с закругленными элементами. Это пример текста с округлением пользовательского интерфейса.
математика
Это сделано для особых стилистических задач представления математики: надстрочный и подстрочный индекс, скобки, пересекающие несколько строк, вложенные выражения и глифы с двойным зачеркиванием с разными значениями.Это пример математического текста: ax² + bx + c = 0.
смайликов
Шрифты, специально разработанные для отображения эмодзи. Это пример текста смайлика: ✝♾.
Фангсонг
Особый стиль китайских иероглифов, который находится между формами песни с засечками и курсивом кай. Этот стиль часто используется для правительственных документов. Это пример текста на фансоне с китайскими иероглифами для слова «фансонг» в традиционной и простой формах, соответственно: 仿宋 體 仿宋 体.

Допустимые фамилии

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

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

Семейство шрифтов
: 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.

Технические характеристики

Совместимость с браузером

Обновите данные о совместимости на GitHub Chrome Chrome Chrome Chrome
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android204 Chrome для Android Opera для Android Safari на iOS Samsung Internet
font-family Chrome Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1
Полная поддержка 1
Примечания Не поддерживается в элементах option .См. Ошибку 1536148.
IE Полная поддержка 3 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Internet Android Полная поддержка 1.0
system-ui Хром Полная поддержка 56 Кромка Полная поддержка 79 Firefox Нет поддержки
Нет поддержки
Полная поддержка 43
Примечания Поддерживается только в macOS.
Альтернативное имя Использует нестандартное имя: -apple-system
IE Нет поддержки Opera Полная поддержка 43 Safari Полная поддержка 9
Полная поддержка 9
Примечания Поддерживается начиная с macOS 10.11.
Альтернативное имя Использует нестандартное имя: -apple-system
WebView Android Полная поддержка 56 Chrome Android Полная поддержка 56 Firefox Android Нет поддержки Opera Android Полная поддержка 43 Safari iOS Полная поддержка 9
Полная поддержка 9
Альтернативное имя Использует нестандартное имя: -apple-system
Samsung Internet Android Полная поддержка 6.0

Обозначения

Полная поддержка
Полная поддержка
Нет поддержки
Нет поддержки
См. Примечания по реализации.
См. Примечания по реализации.
Использует нестандартное имя.
Использует нестандартное имя.
.

CSS свойство font-family


Пример

Укажите шрифт для двух абзацев:

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

p.b {
font-family: Arial, Helvetica, без засечек;
}

Попробуй сам "

Определение и использование

Свойство font-family определяет шрифт для элемента.

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

Существует два типа названий семейств шрифтов:

  • фамилия - Название семейства шрифтов, например «раз», «курьер», «ариал» и т. Д.
  • generic-family - название общего-семейства, например «serif», «sans-serif», «cursive», «fantasy», «monospace».

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

Примечание: Разделите каждое значение запятой.

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

Значение по умолчанию: зависит от браузера
Унаследовано: да
Анимация: нет.Прочитать о animatable
Версия: CSS1
Синтаксис JavaScript: объект .style.fontFamily = "Verdana, sans-serif" Попытайся

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
семейство шрифтов 1.0 4,0 1,0 1,0 3,5


Синтаксис CSS

семейство шрифтов: фамилия | родовое семейство | начальное | наследование;

Стоимость недвижимости

Значение Описание Играй
фамилия
родовое семейство
Приоритетный список названий семейств шрифтов и / или родовых названий семейств Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальный Играй »
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Учебник

CSS: Шрифт CSS

Ссылка CSS: свойство шрифта

Ссылка на HTML DOM: свойство fontFamily


.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *