что такое семейство шрифтов
font-family
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Значение по умолчанию | Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman. |
---|---|
Наследуется | Да |
Применяется | Ко всем элементам |
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family |
Версии CSS
Описание
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Синтаксис
Значения
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-family
Объектная модель
[window.]document.getElementById(» elementID «).style.fontFamily
Браузеры
Каскадные таблицы стилей 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), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии. В таблице ниже приведены несколько различных стилей. Многие из строк будут выглядеть одинаково, если у вас нет большой коллекции шрифтов.
Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений. Навигация по сайтуCreated 17 Jan 2001; Семейство шрифтовВ CSS font family (или face в HTML) состоит из набора связанных шрифтов, сгруппированных в семейства. Например, семейство Times включает в себя различные размеры шрифта, стили (такие как роман и курсивом) и жирность (нормальный и жирный шрифт). Браузер может использовать только шрифты установленные на компьютер, что не всегда соответствует реальности. Поэтому разработчики HTML-кода могут перечислять несколько шрифтов в порядке значимости. Как показано выше, список шрифтов разделяется запятыми. Чтобы избежать неожиданных результатов, желательно в конце списка указывать одно из общих семейств шрифтов, доступное с помощью HTML и CSS на всех компьютерах по умолчанию. Если ни один из перечисленных шрифтов не будет доступен браузеру, то он применит свой шрифт по умолчанию, автоматически. В разных браузерах это разный шрифт, но в большинстве современных браузеров пользователь может самостоятельно изменить настройки шрифта по умолчанию используемого. Это можно сделать на свой вкус или по причине ограничений здоровья или возможностей пользователя (например, можно увеличить размер шрифта при слабом зрении). Общие семейства шрифтовСледующие семейства шрифтов по умолчанию доступны через HTML и CSS на любой машине [1] :
Под Windows API эти семейства определяются как Roman, Swiss, Script, Decorative и Modern, соответственно. Общие шрифтыЧто такое семейство шрифтовЗадумывались ли вы, что такое шрифты? Что делает их особенными в мире компьютеров или что делает их уникальными друг от друга? Почему некоторые люди утверждают, что написание предложения курсивом означает, что вы используете другой шрифт, чем при написании без курсива? Хотите узнать больше о шрифтах и о том, где их найти в Windows или в Интернете? В этом руководстве я попытаюсь ответить на все эти вопросы и объяснить различные мелочи, которые вместе составляют шрифт и семейство шрифтов. Что такое шрифт?Все эти характеристики применимы к шрифтам, которые мы используем сегодня, за исключением того, что мы сейчас обычно используем и видим шрифты, отображаемые на экранах всех видов. В то же время мы все меньше полагаемся на бумагу и аналогичные материалы. Шрифты, используемые на компьютерах, в веб-браузерах, в офисных приложениях или любых других приложениях, по-прежнему определяются теми же характеристиками: размером, весом и стилем. Давайте рассмотрим эти три основные характеристики одну за другой и посмотрим, что делает их значимыми. Наверное, все слышали о шрифте Arial, поэтому мы используем его в качестве примера. Что такое размер шрифта?Размер шрифта обычно определяется в точках, которые часто эквивалентны пикселям на мониторах компьютера. Например, шрифт Arial на 18 пунктов означает, что используемый вами шрифт называется Arial и что его символы (буквы, цифры и другие символы) имеют размер или высоту, если хотите, максимум 18 точек. Предложение, написанное в 24 пунктах Arial, выглядит так: Текст написан на Arial Что такое вес шрифта?Шрифты также характеризуются весом. Вес шрифта относится к толщине символов, которые он содержит, или, точнее, к толщине штрихов символов. Например, шрифт может быть обычным, жирным, легким. Обычный вес означает, что символы этого шрифта являются стандартными. Легкий шрифт означает, что его символы тоньше, чем у аналогичного стандартного или обычного шрифта. Кроме того, жирный шрифт означает, что символы намного толще, чем обычная форма этого шрифта. У шрифта также есть больше весов, таких как светлее, полужирный или жирный. Иногда, вес шрифта может быть указан в числах, как, например, шрифт может быть легкий 100 или жирным 600 шрифтом. Тем не менее, обычный пользователь компьютера будет иметь дело со стандартными весами шрифтов и жирными шрифтами. Ниже вы можете увидеть пример шрифта Arial, выделенного жирным шрифтом, наряду с обычными 18 точками Arial. Текст написан Arial Bold Что такое стиль шрифта?Текст с использованием Arial Narrow и Arial Rounded В дополнение к трем основным аспектам, которые его определяют (размер, вес и стиль), шрифт также характеризуется другими вещами, такими как дизайн, метод, которым он представлен, символы (с помощью точек или с помощью векторов), или их ориентации. Например, арабские шрифты предназначены для чтения справа налево, а не слева направо, как шрифты, используемые для европейских языков. Что такое семейство шрифтов?Семейство шрифтов также называется гарнитурой и представляет собой коллекцию всех шрифтов, которые имеют одинаковые схожие характеристики в дизайне. Шрифты, принадлежащие к одному семейству, могут различаться по размеру, весу и стилю, но имеют одинаковый основной дизайн. Например, когда люди думают об Arial, они думают о семействе шрифтов Arial, а не обо всех шрифтах, которые оно содержит. Например, семейство шрифтов Arial содержит множество различных шрифтов, таких как Arial Light, Arial Regular, Arial Italic, Arial Medium, Arial Bold, Arial Black, Arial Condensed, Arial Narrow, Arial Monospaced, Arial Rounded, Arial Cyrillic, Arial Greek, и другие. Хотя все они отличаются друг от друга, все они имеют одинаковый дизайн, который делает их похожими. Например, буквы могут иметь разный вес или иметь более высокий наклон, но в итоге все они выглядят одинаково. Семейство шрифтов Arial Шрифты как файлы на вашем компьютереШрифты хранятся в виде файлов на компьютерах с Windows и другими операционными системами. Это означает, что у каждого из них есть имя, расширение, размер и так далее. Точно так же, как исполняемые файлы почти всегда имеют расширение «.exe» в Windows, шрифты имеют несколько конкретных часто используемых расширений. Наиболее распространенными расширениями для шрифтов являются «.ttf» и «otf». «.TTF» является аббревиатурой от шрифтов TrueType, формата шрифтов, созданного Apple и лицензированного Microsoft для бесплатного использования в 1980-х годах. Из-за этого этот формат сейчас наиболее широко используется на компьютерах с Windows. «.OTF» происходит от OpenType, и это формат шрифта, построенный на TTF или TrueType. OpenType также является дочерней компанией Microsoft, но на этот раз она была реализована с помощью Adobe вместо Apple. Шрифты OpenType используются на компьютерах с Windows, а также на веб-сайтах в Интернете. Файлы шрифтов в Windows На компьютерах и устройствах с Windows шрифты, как и все остальное, хранятся в файлах. Эти файлы шрифтов находятся в системном разделе, в котором установлена Windows, в папке «Шрифты». Другими словами, они находятся в «C: \ Windows \ Fonts». Как просматривать, устанавливать и удалять шрифты в Windows 10.Чтобы перейти к управлению шрифтами в Windows 10, вам нужно открыть «Параметры Windows» и перейти в меню «Персонализация». Выберите шрифты в левой части окна. На правой стороне, вы увидите все шрифты, установленные в Windows 10. Нажмите на шрифт, для которого вы хотите увидеть более подробную информацию. Вы также можете использовать поле поиска в верхней части, чтобы ввести имя шрифта, который вы хотите просмотреть, а затем нажмите на соответствующий результат поиска. После выбора шрифта, вам будут показаны примеры текста, используя этот шрифт. Вы можете использовать текстовое поле в верхней части с сообщением «введите здесь, чтобы просмотреть шрифт», чтобы ввести текст. Если вы выбрали семейство шрифтов, вы получите выпадающее меню со всеми вариантами шрифтов в семействе. Раздел метаданных обновляется на основе шрифта, выбранного в раскрывающемся меню. Если выбранный шрифт является переменным, в окне «сведения о шрифте» отображается дополнительная ссылка «свойства шрифта переменной«. В окне Свойства переменного шрифта есть два раскрывающихся меню. Первое меню показывает варианты дизайна, которые составляют семейство шрифтов. Во втором меню показаны оси вариации. Это означает, что помимо вариантов дизайна, шрифт позволяет полную гибкость, так что он может производить любые другие варианты, которые необходимы. Так же, как и в предыдущем окне, у вас есть текстовое поле, где вы можете ввести свой текст, чтобы проверить результаты ваших вариантов. Как удалить шрифты в Windows 10 Чтобы удалить шрифты, необходимо войти в раздел Управление шрифтами. Для этого перейдите в раздел «Настройки → Персонализация → Шрифты«. «Выберите шрифт, который вы хотите удалить и нажмите на него. В окне сведения о шрифте нажмите кнопку «Удалить». Подтвердите действие удаления и шрифт будет удален. Где скачать новые шрифтыЕсли вы хотите установить новые шрифты на свой компьютер. Для этого есть несколько сайтов, где вы можете скачать безопасные, бесплатные шрифты: Трудно читать при низких разрешенияхЧтение шрифтов с низким разрешением было проблемой первых шрифтов, используемых на экранах компьютеров. Вместо плавных линий шрифты создавали рваные линии, затрудняющие чтение текстов. Шрифты TrueType значительно улучшили использование технологии хинтинга. Позже было добавлено сглаживание и, наконец, субпиксельный рендеринг. Microsoft реализовала последнее под названием ClearType. ClearType может быть включен или выключен в Windows в зависимости от предпочтений пользователя. Субпиксельная визуализация использует преимущества технологии, используемой в ЖК-экранах. Для каждого пикселя на экране есть три фактических пикселя на ЖК-экране для каждого из основных цветов (красный, зеленый, синий). Белый цвет получается путем запуска всех трех пикселей с максимальной интенсивностью. Субпиксельный рендеринг отображает различную информацию о каждом пикселе цвета, чтобы сгладить края. Некоторых людей беспокоит эта технология, потому что шрифты кажутся им цветными, а не черными. Эффект ухудшается, если фон на экране не белый. Если у вас есть эта проблема, вы можете отключить эту функцию в Windows. Краткая история шрифтовПосле этого было разработано много разных типов шрифтов, но период роста шрифтов был в 20 веке, когда печать стала индустрией, и промышленные печатные машины стали обычным явлением. Это был период широкого распространения печатных книг и газет, и, таким образом, это было время рождения множества различных шрифтов. Наконец, начиная с последней половины 20-го века, люди перешли от чтения на бумаге к чтению на экранах. Из-за роста Интернета чтение новостей и поиск письменной информации, в общем, становятся все более популярными на компьютерах, планшетах, смартфонах и других подобных устройствах. Люди не только стали обращать гораздо больше внимания на то, как выглядят шрифты при отображении на экранах, но и больше людей, чем когда-либо прежде, начали создавать шрифты. Таким образом, сегодня, вероятно, почти невозможно узнать, сколько существует различных шрифтов. Какие шрифты вы предпочитаете?Я надеюсь, что в этой статье мне удалось пролить свет на то, что такое шрифты и семейства шрифтов. Напишите в комментариях, какие шрифты вы предпочитаете использовать. Если у вас есть какие-либо вопросы по этой теме, не стесняйтесь спрашивать в комментариях ниже, и я сделаю все возможное, чтобы ответить на них.
|