Что такое font family в css
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
Браузеры
font-family
Поддержка браузерами
Описание
CSS свойство font-family позволяет указать шрифт текста, который будет использован внутри элемента. Существует два способа указать шрифт для использования:
Описание стандартных семейств шрифтов:
На разных компьютерах установлены различные операционные системы и каждая из них имеет свой собственный стандартный набор шрифтов, а также те шрифты, которые установил сам пользователь. Сам браузер не имеет никаких встроенных шрифтов, для отображения текста на веб-странице он использует те шрифты, которые установлены в операционной системе на компьютере пользователя. Таким образом при выборе шрифта на странице или на сайте в целом стоит учитывать тот факт, что набор шрифтов на вашем компьютере может сильно отличаться от набора шрифтов, имеющихся в наличии на компьютерах у других пользователей.
Чтобы решить проблему выбора используемого шрифта, свойство font-family позволяет в качестве значения указать не один шрифт, а целый список предпочтительных шрифтов, в этом случае их названия должны разделяться запятыми. Когда вы указываете более одного шрифта, всегда начинайте именно с того шрифта, который вы хотите использовать, и заканчивайте список указанием семейства шрифтов, чтобы браузер мог выбрать подходящий шрифт в семействе, если другие шрифты не доступны.
Когда браузер встречает первый указанный шрифт, он проверяет, установлен ли он на компьютере пользователя, и, если да, то использует его в качестве шрифта для элемента. Если шрифт не установлен, то проверяется второй шрифт и т.д. Если ни один из предпочитаемых шрифтов не найден, браузер выберет подходящий шрифт самостоятельно из указанного семейства шрифтов. Если указанные шрифты отсутствуют на компьютере пользователя, а общее семейство шрифтов не указано, браузер будет использовать шрифт, установленный по умолчанию в операционной системе.
Чтобы на сайте отображался выбранный вами нестандартный шрифт для текста, который с высокой вероятностью будет отсутствовать у большинства пользователей, нужно совместно со свойством font-family использовать правило @font-face.
Урок 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;
>
А теперь то же самое в краткой форме:
Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.
НУ что, теперь попрактикуйтесь, и можно приступать к следующему уроку.
Руководство по свойству font в CSS
Выбор правильного шрифта ( font ) и стиля ( style ) очень важен для читабельности текста на странице.
CSS предоставляет несколько свойств для стилизации шрифта текста, включая изменение начертания, управление их размером и жирностью, вариациями и так далее.
Теперь рассмотрим каждое из этих свойств подробнее.
Свойство font-family
Свойство font-family используется для указания шрифта, который будет использоваться для визуализации текста.
Это свойство может содержать несколько разделенных запятыми имен шрифтов в качестве «резервной» системы, т.к., если первый шрифт будет недоступен в системе пользователя, браузер будет пытаеться использовать следующий и т. д., пока не найдет тот, который сможет применить.
Следовательно, сначала укажите шрифт, который вы хотите видеть, а затем любые шрифты, которые могли бы заменить первый, если он недоступен.
Курсивные шрифты выглядят как рукописные. Fantasy шрифты представляют собой художественные начертания, но они практически не используются из-за плохой поддержки в операционных системах.
Разница между Serif и Sans-serif шрифтами
Шрифты с засечками имеют маленькие штрихи (засечки) на концах символов, тогда как шрифты без засечек более прямые и не имеют этих маленьких штрихов. Посмотрим следующую иллюстрацию:
Подробнее о стандартных, браузерных шрифтах, здесь: web safe fonts.
Свойство font-style
Свойство font-style используется для установки стиля шрифта для текстового содержимого элемента.
Давайте посмотрим следующий пример, чтобы понять, как это в основном работает:
На первый взгляд стили шрифта с косым ( oblique ) и курсивным ( italic ) шрифтом выглядят одинаково, но есть разница. Курсивный стиль italic использует курсивную версию шрифта (italic version), в то время как наклонный стиль oblique это просто наклоненный браузером обычный шрифт. Разумеется, использование italic более предпочтительно.
Свойство font-size
Свойство font-size используется для установки размера шрифта для текстового содержимого элемента.
Установка font-size в пикселях (px)
Посмотрим следующий пример, чтобы понять, как это в основном работает:
Определение размеров шрифта в пикселях не считается хорошей практикой, поскольку пользователь не может изменить размер шрифта в настройках браузера. Например, пользователи с ограниченным или слабым зрением могут захотеть немного увеличить размер шрифта.
Поэтому следует избегать использования значений в пикселях, а использовать относительные единицы измерения, если вы хотите создать отзывчивый дизайн.
Размер текста также можно изменить во всех браузерах, используя функцию масштабирования. Однако эта функция изменяет размер всей страницы, а не только текста. W3C рекомендует использовать значения em или % для создания более отзывчивых макетов.
Установка font-size в единицах em
Единица em является пропорциональной единицей измерения. При определении свойства font-size значение 1em равно размеру шрифта, который применяется к родительскому элементу.
Давайте посмотрим на следующий пример, чтобы понять, как это работает:
Использование комбинации % и em
Установка font-size в единицах rem
Установка font-size с помощью ключевых слов
CSS предоставляет возможность использования некоторых ключевых слов для определения размеров шрифта.
Установка font-size в единицах vw и vh
Посмотрим следующий пример:
Для создания более гибкой типографики вы можете использовать медиазапросы CSS.
Свойство font-weight
Свойство font-weight указывает вес или жирность шрифта.
Давайте посмотрим на примере:
Большинство шрифтов доступны только в ограниченном количестве весов; часто они доступны только в normal и bold начертаниях. В случае, если шрифт не доступен в указанном весе, будет выбран альтернативный, который является ближайшим доступным.
Свойство font-variant
Свойство font-variant позволяет отображать текст в специальном начертании с маленькими заглавными буквами.
Маленькие заглавные буквы ( small-caps ) немного отличаются от обычных заглавных букв, в которых строчные буквы отображаются как уменьшенные версии соответствующих заглавных букв.
Посмотрим следующий пример:
Значение normal переформатирует маленькие заглавные буквы в нормальные.
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 1
Оценок пока нет. Поставьте оценку первым.
Похожие посты
Руководство по свойству opacity в CSS
Руководство по таблицам в CSS
Руководство по свойству margin в CSS
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
Каскадные таблицы стилей CSS советы & приёмы
Смотрите также указатель всех приёмов работы.
Семейства шрифтов
После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.
Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.
Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:
