Свойство font-family устанавливает тип (семейство) шрифта.
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Источник: http://puzzleweb.ru/css/pr_font-family.php
Описание
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.
| Значение по умолчанию: | зависит от браузера |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | нет |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.fontFamily=»arial,sans-serif» |
Источник: http://puzzleweb.ru/css/pr_font-family.php
Вариант шрифта [font-variant]
Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:
Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.
- Показать пример
Источник: http://ru.html.net/tutorials/css/lesson4.php
Шрифты в подключаемых файлах (font-face)
Чтобы специфический шрифт сайта попал к пользователю, файл со шрифтом необходимо передать. Делается эта загрузка благодаря CSS правилу
@font-face
. Чтобы загрузить файл шрифта, необходимо сначала положить его к себе на сайт или узнать ссылку на него на других сайтах. После того как будет получена ссылка на файл шрифта, на HTML странице можно подключить его и задать этот шрифт тексту через свойство font-family. Приведём пример HTML кода вместе со стилями:
<style>@font-face { font-family: ‘Montserrat’; src: url(‘/montserrat.ttf’); }</style><span style=»font-family: Montserrat;»>Тише, мыши, кот на крыше.</span>
В правиле @font-face:
- font-family — указывается название шрифта. Это название необходимо использовать далее в CSS правилах.
- url(‘ … ‘) — указывается абсолютная или относительная ссылка на файл шрифта. У файлов шрифтов есть разные расширения: ttf, eot, woff, woff2. Некоторые браузеры умеют понимать одни файлы, другие нет. Поэтому часто указывается несколько файлов шрифтов с разными расширениями.
Шрифты замедляют загрузку страницы. Ведь CSS правила читаются последовательно. И пока не закончится загрузка файлов шрифтов, указанных в @font-face, то страница не начнёт отображаться. Поэтому если хотите ускорить загрузку своего сайта, то подключайте их в самом конце страницы. Либо используйте веб безопасные шрифты. С другой стороны, достаточно загрузить шрифт один раз — потом он попадает в кеш.
Источник: http://mousedc.ru/learning/16-shrifty-html-font-family-face/
Синтаксис
font-family: имя шрифта [, имя шрифта[, …]] | inherit;
Источник: http://puzzleweb.ru/css/pr_font-family.php
Свойство color — задаем цвет текста
Атрибут стиля color задает цвет текста. Синтаксис:
color: цвет
Цвет можно задать с помощью RGB-кода, который записывается в формате:
#<доля красного цвета><доля зеленого цвета><доля синего цвета>
Все доли записываются в формате шестнадцатеричных чисел от 00 до FF. Например, чтобы все заголовки h2 на странице выводились красным цветом, необходимо написать такой код CSS:
h2 { color: #ff0000; }
Также возможно задавать цвет с помощью имен. Красный цвет будет red, черный — black, белый — white. Например:
h2 { color: red; }
Источник: http://webcodius.ru/spravochnik-css/font-family-color-svoistva-css-dlya-shriftov.html
Scaled Vector Graphics (SVG-файлы)
По умолчанию type.today не предлагает SVG-файлы. Если вам необходимы такие файлы — свяжитесь с нами.
Источник: http://type.today/ru/faq/general/technical_issues
Вес шрифта [font-weight]
Свойство font-weight описывает, насколько толстым, или «тяжёлым», должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.
- Показать пример
Источник: http://ru.html.net/tutorials/css/lesson4.php
See also[edit]
- Web typography
Источник: http://en.wikipedia.org/wiki/Web_Open_Font_Format
Совместимость с браузерами
BCD tables only load in the browser
[1] system-ui в данный момент не реализовано, смотри баг 1226042.
[2] system-ui реализовано в Safari (wkbug.com/151493), возможно будет выпущено в ближайшем времени.
[3] префиксный алиас -apple-system поддерживается в Safari, начиная с OS X 10.11 и iOS 9, а также в Firefox 43 на macOS (баг 1201318).
Источник: http://developer.mozilla.org/ru/docs/Web/CSS/font-family
Значения свойства
| Значение | Описание |
|---|---|
| имя шрифта | Определяет названия шрифтов, разделенных запятыми. |
| семейство | Указывает имя семейства шрифтов, при указании более одного семейства, имена разделяются запятыми. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Меняйте значение свойства! Наблюдайте за разницей.
div {
font-family: Georgia;
}
Источник: http://puzzleweb.ru/css/pr_font-family.php
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Источник: http://webref.ru/css/font-family
Похожие страницы
CSS Справочник: CSS Font
CSS Справка: font Свойство
HTML DOM Справочник: fontFamily Свойство
Источник: http://html5css.ru/cssref/pr_font_font-family.php
P.S.
Некоторые вещи действительно очень скучные – font-family – это всего лишь отображение вашего написанного текста и ничего более! И наверное вы должны спросить, а почему же скучная тема — вы один раз это настроите на своем сайте и больше никогда к этому можете и не возвращаться… и конечно же , чтобы их настроить и установить — это нужно знать, как это работает и где у него кнопка © !
Но с другой стороны, если вдуматься, то выбранный отвратительный font-family – будет только отталкивать ваших потенциальных адептов! И с этой же стороны font-family — имеет огромное значение! И как бы странно это не звучало, но по моему мнению лучше использовать стандартные параметры, которые привычны для любого человека…
Источник: http://dwweb.ru/page/css/006_font-family.html
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Источник: http://webref.ru/css/font-family
