Что такое font family

font-family

Краткая информация

Версии CSS

Описание

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

Синтаксис

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-family

Объектная модель

[window.]document.getElementById(» elementID «).style.fontFamily

Браузеры

Источник

2.6. CSS-шрифты

Шрифт в CSS — это ресурс, содержащий визуальное представление символов. На самом простом уровне он содержит информацию, которая сопоставляет коды символов с фигурами (называемые глифами), представляющие эти символы.

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

Ресурсы шрифтов могут быть установлены локально на устройстве, в котором работает браузер. Для локальных ресурсов шрифта описательная информация может быть получена непосредственно из ресурса шрифта (например, из файла arial.ttf ). Для загружаемых ресурсов шрифтов, также называемых веб-шрифтами, описательная информация включена со ссылкой на ресурс шрифта (например, для шрифта Poiret One).

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

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

Базовые свойства CSS-шрифтов

1. Семейство шрифтов: свойство font-family

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

2. Насыщенность шрифта: свойство font-weight

Свойство font-weight задаёт насыщенность шрифта.

Рис. 1. Свойство font-weight

3. Ширина шрифта: свойство font-stretch

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

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

Когда не существует глифа для заданной ширины, значения normal или condensed отображаются для более узкого начертания символа, в противном случае отображается более широкое начертание. И наоборот, расширенные значения используют широкое начертание, в противном случае — узкое начертание. На рисунке ниже показано, как девять параметров свойства влияют на выбор шрифта для семейства шрифтов, содержащего различные ширины, серый цвет указывает ширину, для которой не существует начертания, поэтому подставляется другая ширина:

Рис. 2. Свойство font-stretch

4. Начертание шрифта: свойство font-style

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

Рис. 3. Свойство font-style

5. Размер шрифта: свойство font-size

Свойство font-size указывает желаемую высоту глифов из шрифта.

6. Относительный размер шрифта: свойство font-size-adjust

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

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

Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.

Рис. 4. Термины в типографике

Рис. 5. Текст с использованием и без использования font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

Следующие значения относятся к системным шрифтам:
caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
icon — шрифт, используемый для обозначения значков.
menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
message-box — шрифт, используемый в диалоговых окнах.
small-caption — шрифт, используемый для маркировки подписи элементов управления.
status-bar — шрифт, используемый в строке состояния окна.

8. Управление синтезом шрифтов: свойство font-synthesis

Свойство font-synthesis определяет, разрешено ли пользовательским агентам (браузерам) синтезировать полужирное или наклонное начертание шрифтов, когда они отсутствуют в семействе шрифтов. Если weight не указан, пользовательские агенты не должны синтезировать полужирное начертание, а если style не указан, пользовательские агенты не должны синтезировать курсив.

Источник

font-family

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

Описание

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

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

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

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

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

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

Источник

font-family в CSS

CSS предлагает несколько свойств шрифтов, непосредственно влияющих на визуализацию текста. Свойство font-family определяет, какой шрифт использовать.

Общие семейства шрифтов

Шрифты группируются по пяти общим семействам:

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

Надёжные веб-шрифты

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

Ваша веб-страница будет использовать Arial при условии, что он установлен на компьютере пользователя. Если шрифт Arial недоступен, то браузер будет применять шрифт с засечками по умолчанию (обычно используется Times New Roman).

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

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

Применение списка шрифтов

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

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

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

Источник

Урок 4: Шрифты в CSS

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

Так вот за шрифты в CSS отвечают следующие свойства:

Свойство FONT-FAMILY

↑ Наверх ↑

Свойство FONT-STYLE

Данное свойство задает стиль шрифта. Может принимать три значения:

h1 <
font-family: verdana, arial, sans-serif;
font-style : normal ;
>
h2 <
font-family: verdana, arial, sans-serif;
font-style : italic ;
>
h3 <
font-family: verdana, arial, sans-serif;
font-style : oblique ;
>

↑ Наверх ↑

Свойство FONT-VARIANT

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

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

Пример записи стиля:

h1 <
font-family: verdana, arial, sans-serif;
font-variant : small-caps ;
>
h2

Думаю тут все понятно, поехали дальше.

↑ Наверх ↑

Свойство FONT-WEIGHT

P
DIV <
font-family: arial, verdana, sans-serif;
font-weight : bold ;
>

↑ Наверх ↑

Свойство FONT-SIZE

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

Давайте прикольнемся над заголовками:

h1 <
font-family: arial, verdana, sans-serif;
font-size : 18px ;
>
h2 <
font-family: arial, verdana, sans-serif;
font-size : 36px ;
color: red;
>

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

↑ Наверх ↑

Сокращенная запись. Свойство FONT

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

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

font-style _ font-variant _ font-weight _ font-size _ font-family

P <
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
>

А теперь то же самое в краткой форме:

Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.

НУ что, теперь попрактикуйтесь, и можно приступать к следующему уроку.

Источник