Какое свойство определяет для элемента список имен семейств шрифтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Автор: Louis Lazaris

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

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

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

Описание

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

• family-name (имя шрифта) — название определённого шрифта из какого-нибудь семейства шрифтов, например: times, courier, arial, и т.д. Если название шрифта содержит пробелы, оно должно быть заключено в одиночные или двойные кавычки, например: «Times New Roman».
• generic-family (семейство шрифтов) — набор шрифтов, обладающих общими характеристиками. Следующие семейства шрифтов по умолчанию доступны в любой операционной системе: serif, sans-serif, cursive, fantasy, monospace.

Описание стандартных семейств шрифтов:

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

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

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

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

Чаще всего при указании свойства font-family, используют «безопасные» (стандартные) Web-шрифты.

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

Синтаксис

font-family: имя шрифта [, имя шрифта[, …]] | inherit;

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

Пример