Свойство font-family — тип (семейство) шрифта
Свойство font-family устанавливает тип шрифта.
Синтаксис
селектор {
font-family: имя шрифта;
}
Замечание
Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.
Замечание
Можно перечислять несколько похожих шрифтов через запятую. Например, font-family: Georgia, «Times New Roman». Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующий шрифт из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
Заканчивают список обычно ключевым словом, которое описывает тип шрифта (все шрифты относятся к какому-нибудь типу) — serif, sans-serif, cursive, fantasy или monospace
Типы шрифтов
| Тип | Описание |
|---|---|
| serif | Шрифт с засечками. |
| sans-serif | Шрифт без засечек. |
| cursive | Курсивный шрифт. |
| fantasy | Декоративный шрифт с красивыми завитушками и необычными эффектами. |
| monospace | Моноширинный шрифт, ширина каждого символа в котором одинакова. |
Значение по умолчанию: шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.
Пример
Назначим шрифту семейство Arial:
<p>
Lorem ipsum dolor sit amet.
</p> p {
font-family: Arial;
}
:
Пример
Назначим шрифту семейство Times New Roman. Так как название шрифта состоит из нескольких слов, то берем его в кавычки: <p>
Lorem ipsum dolor sit amet.
</p> p {
font-family: "Times New Roman";
}
:
Пример
Назначим шрифту шрифт из группы serif (скорее всего возьмется Times New Roman):
<p>
Lorem ipsum dolor sit amet.
</p> p {
font-family: serif;
}
:
Пример
Назначим шрифту шрифт из группы sans-serif (скорее всего возьмется Arial):
<p>
Lorem ipsum dolor sit amet.
</p> p {
font-family: sans-serif;
}
:
Пример
Назначим шрифту шрифт из группы fantasy (у вас может и не сработать из-за отсутствия такого шрифта):
<p>
Lorem ipsum dolor sit amet.
</p> p {
font-family: fantasy;
}
:
Пример
Назначим шрифту шрифт из группы monospace (буквы станут одинакового размера):
<p>
Lorem ipsum dolor sit amet.
</p> p {
font-family: monospace;
}
:
Свойство font-family | CSS справочник
CSS свойстваОпределение и применение
CSS свойство font-family задает шрифт для элемента. Свойство может содержать несколько названий шрифтов, указанных через запятую. Если браузер не поддерживает первый шрифт, он использует следующий указанный шрифт. Шрифты, которые содержат в названии более одного слова, либо цифры необходимо помещать в кавычки.
Начинаете всегда с желаемого шрифта, а затем указывайте альтернативные. Также рекомендуется последним в списке указывать generic-family (семейство шрифта). В этом случае страница будет отображена шрифтом того же семейства, если у пользователя по каким-то причинам отсутствуют все указанные в перечне шрифты.
Поддержка браузерами
CSS синтаксис:
font-family:"font | initial | inherit";
JavaScript синтаксис:
object.style.fontFamily = "courier"
Значения свойства
| Значение | Описание |
|---|---|
| family-name (название шрифта) | Название определённого шрифта (из определенного семейства шрифтов, например: arial, courier и т.п.). | generic-family (семейство шрифта) | Название набора шрифтов (имеющих характерные общие черты, например: serif (с засечками), sans-serif (без засечек) и т.п.). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Да.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства font-family.</title>
<style>
.times {
font-family : "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный serif (с засечками)*/
}
.courier {
font-family : Courier; /* определяем основной шрифт "Courier" */
}
</style>
</head>
<body>
<p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p>
<p class = "courier">Параграф, отображаемый шрифтом "Courier".</p>
</body>
</html>
Пример использования свойства CSS font-family.CSS свойстваfont-family в CSS | Учебные курсы
CSS предлагает несколько свойств шрифтов, непосредственно влияющих на визуализацию текста. Свойство font-family определяет, какой шрифт использовать.
Общие семейства шрифтов
Шрифты группируются по пяти общим семействам:
- serif — на конце каждого символа прикреплены небольшие линии;
- sans-serif;
- monospace;
- cursive;
- fantasy.
cursive и fantasy никогда не используются.
Поскольку свойство font-family наследуется всеми дочерними элементами HTML, вы можете применить шрифт для всего HTML-документа, используя его для предка всех элементов HTML: элемента <body>.
body { font-family: sans-serif; }С этим правилом CSS веб-страница будет использовать шрифт sans-serif, определённый пользователем в его настройках.
Надёжные веб-шрифты
Проблема использования общих названий семейств шрифтов заключается в том, что дизайн вашей веб-страницы будет полагаться на шрифт, установленный пользователем в его настройках. Но вы, вероятно, хотите, чтобы ваша веб-страница выглядела одинаково на любом компьютере и пожелаете определить конкретный шрифт, который будет использоваться. Чтобы сделать это, просто укажите название шрифта.
body { font-family: Arial; }Ваша веб-страница будет использовать Arial при условии, что он установлен на компьютере пользователя. Если шрифт Arial недоступен, то браузер будет применять шрифт с засечками по умолчанию (обычно используется Times New Roman).
Arial является безопасным выбором, хотя бы потому, что он установлен на всех компьютерах Windows и Mac, а также на большинстве систем Linux. Именно поэтому Arial считается надёжным веб-шрифтом: вы можете безопасно использовать его в CSS и быть почти уверены, что шрифт на компьютере пользователя будет установлен.
Есть девять надёжных веб-шрифтов:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Применение списка шрифтов
Хотя использование любого из этих значений для свойства font-family является безопасным выбором, вы можете определить запасные значения, написав список семейств шрифтов:
body { font-family: Arial, Verdana, sans-serif; }При определении нескольких значений для font-family, браузер будет искать первое значение Arial и использовать его. Если Arial не доступен, то будет использоваться следующий шрифт Verdana. И, наконец, если и он не доступен, то будет использоваться шрифт браузера без засечек по умолчанию.
Это хорошая практика использовать общее семейство как последнее значение. Если вы не можете определить конкретный шрифт для использования, то можете по крайней мере, определить тип желаемого шрифта.
Поскольку дизайнеры хотят использовать больше оригинальных шрифтов, но по-прежнему желают, чтобы их веб-страницы выглядели одинаково на любом компьютере, можно включить шрифт на веб-страницу. Таким образом, шрифт будет доступен, даже если он не присутствует на компьютере пользователя, просто потому, что шрифт предложит сайт.
Перейти к заданиям
Font family css возможные шрифты
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
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.
Шрифт в CSS — это ресурс, содержащий визуальное представление символов. На самом простом уровне он содержит информацию, которая сопоставляет коды символов с фигурами (называемые глифами), представляющие эти символы.
Шрифты, использующие общий стиль дизайна, обычно группируются в семейства шрифтов, классифицируемые набором стандартных свойств шрифта. Внутри семейства форма, отображаемая для данного символа, может варьироваться в зависимости от толщины обводки, наклона или относительной ширины.
Ресурсы шрифтов могут быть установлены локально на устройстве, в котором работает браузер. Для локальных ресурсов шрифта описательная информация может быть получена непосредственно из ресурса шрифта (например, из файла arial.ttf ). Для загружаемых ресурсов шрифтов, также называемых веб-шрифтами, описательная информация включена со ссылкой на ресурс шрифта (например, для шрифта Poiret One).
Используя различные шрифты для заголовков, абзацев и других элементов, можно задавать определенный стиль письменных сообщений, передавая желаемые эмоции и настроение. Окунаясь в многообразие шрифтов, не забывайте, что текст основного содержимого веб-страницы должен быть в первую очередь читабельным.
Не рекомендуется использовать более двух шрифтов на странице, а желаемого контраста можно достигнуть за счет комбинирования шрифтов разной толщины, размера, начертания или же при помощи цвета. Более подробно с правилами веб-типографики вы сможете ознакомиться в предложенной статье.
Базовые свойства CSS-шрифтов
- Содержание:
- 1. Семейство шрифтов: свойство font-family
- 2. Насыщенность шрифта: свойство font-weight
- 3. Ширина шрифта: свойство font-stretch
- 4. Начертание шрифта: свойство font-style
- 5. Размер шрифта: свойство font-size
- 6. Относительный размер шрифта: свойство font-size-adjust
- 7. Сокращенная запись свойств шрифта: свойство font
- 8. Управление синтезом шрифтов: свойство font-synthesis
1. Семейство шрифтов: свойство font-family
Свойство font-family используется для выбора начертания шрифта. Поскольку невозможно предсказать, установлен тот или иной шрифт на компьютере посетителя вашего сайта, рекомендуется прописывать все возможные варианты однотипных шрифтов. В таком случае браузер будет проверять их наличие, последовательно перебирая предложенные варианты.
Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.
| font-family | |
|---|---|
| Значения: | |
| family-name | Название (имя) семейства шрифтов, например, Times , Courier , Arial . Рекомендуется указывать вместе с базовым семейством. |
| generic-family | Базовое семейство. CSS определяет пять базовых семейств шрифтов: Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia) Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono) Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Аллегорические шрифты (Western, Woodblock, Klingon) |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
2. Насыщенность шрифта: свойство font-weight
Свойство font-weight задаёт насыщенность шрифта.
| font-weight | |
|---|---|
| Значения: | |
| normal | Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400. |
| bold | Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700. |
| bolder | Насыщенность шрифта будет больше, чем у предка. |
| lighter | Насыщенность шрифта будет меньше, чем у предка. |
| 100, 200, 300, 400, 500, 600, 700, 800, 900 | Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 1. Свойство font-weight
3. Ширина шрифта: свойство font-stretch
Свойство font-stretch выбирает нормальное, сжатое или расширенное начертание символа из семейства шрифтов.
Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого до самого широкого:
| font-stretch | |
|---|---|
| Значения: | |
| ultra-condensed | Указывает на наиболее сжатый шрифт. |
| extra-condensed | Указывает на второй по сжатости шрифт. |
| condensed | Указывает на сжатый шрифт. |
| semi-condensed | Указывает на немного сжатый шрифт. |
| normal | Значение по умолчанию. |
| semi-expanded | Слегка расширенный шрифт. |
| expanded | Расширенный шрифт. |
| extra-expanded | Второй по расширенности шрифт. |
| ultra-expanded | Максимально расширенный шрифт. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Когда не существует глифа для заданной ширины, значения normal или condensed отображаются для более узкого начертания символа, в противном случае отображается более широкое начертание. И наоборот, расширенные значения используют широкое начертание, в противном случае — узкое начертание. На рисунке ниже показано, как девять параметров свойства влияют на выбор шрифта для семейства шрифтов, содержащего различные ширины, серый цвет указывает ширину, для которой не существует начертания, поэтому подставляется другая ширина:
Рис. 2. Свойство font-stretch
4. Начертание шрифта: свойство font-style
Свойство font-style позволяет выбрать стиль начертания для шрифта. При этом разница между курсивом и наклонным начертанием заключается в том, что курсив вносит небольшие изменения в структуру каждого символа, в то время как наклонное начертание представляет собой наклонную версию прямого шрифта.
| font-style | |
|---|---|
| Значения: | |
| normal | Значение по умолчанию, устанавливает для текста обычное начертание шрифта. |
| italic | Выделяет текст курсивом. |
| oblique | Устанавливает наклонное начертание шрифта. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 3. Свойство font-style
5. Размер шрифта: свойство font-size
Свойство font-size указывает желаемую высоту глифов из шрифта.
| font-size | |
|---|---|
| Значения: | |
| absolute-size | xx-small , x-small , small , medium , large , x-large , xx-large . В качестве стандартного размера принимается medium . В CSS1 предложенный коэффициент масштабирования между соседними индексами составлял 1.5, что для пользователя оказалось слишком большим. В CSS2 предложенный коэффициент масштабирования для экрана компьютера между смежными индексами составлял 1.2, что все еще создавало проблемы для небольших размеров. Новый коэффициент масштабирования варьируется между каждым индексом, чтобы обеспечить лучшую читаемость. |
| relative-size | smaller , larger . Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для xx-small и xx-large . |
| длина | Размер шрифта устанавливается с помощью положительных значений единиц длины, например, px , em , как целых, так и дробных. |
| % | Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью em эквивалентно процентному значению. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
| Значения absolute-size | |||||||
|---|---|---|---|---|---|---|---|
| xx-small | x-small | small | medium | large | x-large | xx-large | |
| Коэффициент масштабирования | |||||||
| 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML заголовки | |||||||
| h6 | h5 | h5 | h4 | h3 | h2 | ||
| HTML размер шрифта | |||||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | |
6. Относительный размер шрифта: свойство font-size-adjust
Для любого заданного размера шрифта явный размер и четкость текста варьируется в зависимости от шрифта. Для таких шрифтов, как латиница или кириллица, которые различают прописные и строчные буквы, относительная высота строчных букв по сравнению с их прописными аналогами является определяющим фактором удобочитаемости. Это обычно называют значением аспекта. Точно определенный, он равен x-height шрифта, разделенной на размер шрифта.
В ситуациях, когда для шрифта указано несколько семейств шрифтов, резервные шрифты могут не использовать то же значение аспекта, что и желаемое семейство шрифтов, и, следовательно, будут казаться менее четкими.
Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.
Рис. 4. Термины в типографике
| font-size-adjust | |
|---|---|
| Значения: | |
| none | Не сохраняет x-height шрифта. |
| число | Задает значение аспекта, используемое в приведенных ниже расчетах для расчета скорректированного размера шрифта: c = (a / a ‘) s где: s = значение размера шрифта a = значение аспекта, указанное в свойстве font-size-adjust a ‘ = значение аспекта фактического шрифта c = скорректированный размер шрифта для использования Отрицательные значения недействительны. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Как отображается текст в каждом из этих сравниваемых шрифтов, показано ниже, столбцы показывают текст, отображаемый в Verdana, Futura и Times. Одно и то же значение размера шрифта используется для ячеек в каждой строке, и для отображения различий по x-height включены красные линии. В верхней половине каждая строка отображается в том же значении размера шрифта. То же самое верно и для нижней половины, но в этой половине также устанавливается свойство font-size-adjust , чтобы фактический размер шрифта регулировался таким образом, чтобы сохранить x-height для каждой строки. Обратите внимание, что небольшой текст остается относительно разборчивым в каждой строке в нижней половине.
Рис. 5. Текст с использованием и без использования font-size-adjust
7. Сокращенная запись свойств шрифта: свойство font
Свойство font за исключением описанного ниже, является сокращенным свойством для установки font-style , font-variant , font-weight , font-stretch , font-size/line-height , font-family . Также могут быть включены значения для свойства font-variant , которые поддерживаются CSS 2.1 — normal или small-caps .
Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust , font-kerning , все подсвойства font-variant и настройки шрифтов, за исключением font-synthesis . Затем этим свойствам присваиваются те значения, которые указаны в свойстве font . Для свойства font-size-adjust невозможно установить значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуальное свойство. Если явное значение какого-либо свойства не нужно, то оно опускается.
Следующие значения относятся к системным шрифтам:
caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
icon — шрифт, используемый для обозначения значков.
menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
message-box — шрифт, используемый в диалоговых окнах.
small-caption — шрифт, используемый для маркировки подписи элементов управления.
status-bar — шрифт, используемый в строке состояния окна.
Системные шрифты могут быть установлены только целиком; то есть семейство шрифтов, размер, вес, стиль и т.д. задаются одновременно. Эти значения затем могут быть изменены индивидуально, если это необходимо. Ключевые слова, используемые для системных шрифтов, перечисленных выше, обрабатываются как ключевые слова только в том случае, если они находятся в начальной позиции, в других позициях эта же строка обрабатывается как часть имени семейства шрифтов. Системные шрифты могут быть указаны только с этим свойством, но не с самим font-family .
8. Управление синтезом шрифтов: свойство font-synthesis
Свойство font-synthesis определяет, разрешено ли пользовательским агентам (браузерам) синтезировать полужирное или наклонное начертание шрифтов, когда они отсутствуют в семействе шрифтов. Если weight не указан, пользовательские агенты не должны синтезировать полужирное начертание, а если style не указан, пользовательские агенты не должны синтезировать курсив.
Смотрите также указатель всех приёмов работы.
Семейства шрифтов
После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в 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), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.
В таблице ниже приведены несколько различных стилей. Многие из строк будут выглядеть одинаково, если у вас нет большой коллекции шрифтов.
| правило | serif | sans-serif |
|---|---|---|
| Стили | ||
| font-style: normal | Съешь же… | Съешь же… |
| font-style: italic | Съешь же… | Съешь же… |
| font-style: oblique | Съешь же… | Съешь же… |
| Насыщенность шрифта | ||
| font-weight: 100 | Съешь же… | Съешь же… |
| font-weight: 200 | Съешь же… | Съешь же… |
| font-weight: 300 | Съешь же… | Съешь же… |
| font-weight: normal | Съешь же… | Съешь же… |
| font-weight: 500 | Съешь же… | Съешь же… |
| font-weight: 600 | Съешь же… | Съешь же… |
| font-weight: bold | Съешь же… | Съешь же… |
| font-weight: 800 | Съешь же… | Съешь же… |
| font-weight: 900 | Съешь же… | Съешь же… |
| Варианты | ||
| font-variant: normal | Съешь же… | Съешь же… |
| font-variant: small-caps | Съешь же… | Съешь же… |
| Растяжение | ||
| font-stretch: ultra-condensed | Съешь же… | Съешь же… |
| font-stretch: extra-condensed | Съешь же… | Съешь же… |
| font-stretch: condensed | Съешь же… | Съешь же… |
| font-stretch: semi-condensed | Съешь же… | Съешь же… |
| font-stretch: normal | Съешь же… | Съешь же… |
| font-stretch: semi-expanded | Съешь же… | Съешь же… |
| font-stretch: expanded | Съешь же… | Съешь же… |
| font-stretch: extra-expanded | Съешь же… | Съешь же… |
| font-stretch: ultra-expanded | Съешь же… | Съешь же… |
Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.
Навигация по сайту
Created 17 Jan 2001;
Last updated Вт 05 ноя 2019 19:12:56
Рекомендуем к прочтению
Урок 6. Шрифты
Для изменения параметров шрифтов в CSS используется свойство font
Font-family — задает непосредственно сам шрифт. Шрифты можно разделить на группы:
Serif — шрифты с засечками, например, Times New Roman.
Sans-serif — шрифты рубленные, без засечек, например, Arial.
Monospace — моноширинные шрифты, например, Courier New.
Cursive — курсивные шрифты, например, Calisto MT.
Fantasy — декоративные шрифты, например, Torhok.
Пример:
Font-family можно задавать группу шрифтов. Например:
body{
font-family: Verdana, sans-serif;
}
Теперь текст на странице будет написан шрифтом Verdana, а при отсутствие у пользователя такого шрифта на компьютере будет использоваться другой из группы sans-serif. Шрифт подбирается автоматически на наиболее близкий ему по виду. Можно прописывать несколько шрифтов через запятую, в порядке убывания приоритета.
Font-style — задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Создадим html-страница с тремя параграфами и пропишем каждому ID:
<html>
<head>
<title>css шрифты</title>
<link rel=»stylesheet» type=»text/css» href=»/style.css»>
</head>
<body>
<p>Текст в параграфе с идентификатором sn.</p>
<p>Текст в параграфе с идентификатором so.</p>
<p>Текст в параграфе с идентификатором si.</p>
</body>
</html>
Пропишем шрифт для всех параграфов:
#sn, #so, #si{
font-family: Verdana, sans-serif;
}
Зададим каждому параграфу свой стиль:
#sn, #so, #si{
font-family: Verdana, sans-serif;
}
#sn{
font-style:normal;
}
#so{
font-style:oblique;
}
#si{
font-style:italic;
}
Font-variant — вариант написания букв: normal (обычный) и small-caps (малые прописные буквы). По умолчанию это свойство имеет значение normal.
#sn, #so, #si{
font-family: Verdana, sans-serif;
}
#so{
font-variant:small-caps;
}
Font-weight — задает толщину букв. Задается числами: 100, 200, 300, 400, 500, 600, 700, 800 и 900. Можно задавать толщину букв при помощи ключевые слова:
normal — нормальный
bold — полужирный
bolder — более жирный по отношению к базовому, унаследованному от предка
lighter — менее жирный по отношению к базовому, унаследованному от предка
#sn, #so, #si{
font-family: Verdana, sans-serif;
}
#so{
font-weight:bold;
}
Font-size — задает размер шрифта. Задавать размер шрифта в css возможно тремя способами:
с помощью ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large)
с помощью относительных единиц (% и em)
с помощью единиц измерения длины (пикселы, пункты, сантиметры и миллиметры)
Использовать ключевые слова пока не рекомендуется, так как разные браузеры по-разному их отображают.
Для web-страниц лучше использовать только три единицы измерения:
px — для «фиксированного» дизайна сайта
% — для «резинового» дизайна
em — для пропорционального изменения размера
#sn, #so, #si{
font-family: Verdana, sans-serif;
font-size:12px;
}
#so{
font-size:1.2em;
}
#si{
font-size:0.8em;
}
Сокращенная запись свойства font
Для сокращения записи перечисляем свойства через пробел в следующем порядке: font-style, font-variant, font-weight, font-size, font-family. Любое из свойств, кроме font-size и font-family, можно пропустить. Пример:
#sn, #so, #si{
font:italic 12px Verdana, sans-serif;
}
#so{
font-size:1.2em;
}
#si{
font-style:normal;
}
Сначала сокращенной записью мы прописали свойства font для всех параграфов, потом создали отличия для второго и третьего параграфов. Проверяем:
seodon.ru | CSS справочник — font-family
Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
Свойство CSS font-family используется для указания имени (гарнитуры) шрифта элемента. Сами шрифты берутся из списка тех, которые установлены в операционной системе пользователя или подключены At-правилом @font-face.
Тип свойства
Назначение: шрифты.
Применяется: ко всем элементам.
Наследуется: да.
Значения
Значением свойства font-family является ключевое слово inherit или указание одного или нескольких (через запятую) имен шрифтов, тогда, если в операционной системе пользователя нет первого шрифта, браузер использует второй, потом третий и так далее. В конце рекомендуется поставить одно из имен семейства шрифтов, в этом случае, если ни одного шрифта не будет найдено, браузер применит шрифт максимально подходящий данному семейству.
Таблица ниже содержит некоторые популярные названия шрифтов, а также соответствующие им семейства. Обратите внимание, что имена шрифтов, состоящие из нескольких слов необходимо закрывать в двойные или одинарные кавычки.
| Шрифты | Семейство |
|---|---|
| ‘Comic Sans MS’ | cursive (рукописные) |
| Courier | monospace (моноширинные) |
| Arial, Helvetica, Verdana, Tahoma | sans-serif (рубленные, гротески) |
| Times, ‘Times New Roman’, Garamond | serif (с засечками, антиква) |
inherit — наследует значение font-family от родительского элемента.
Процентная запись: не существует.
Значение по умолчанию: зависит от типа и настроек браузера, как правило, это Times New Roman.
В разных браузерах внешний вид шрифтов по умолчанию для одного и того же семейства может отличаться. Кроме этого, при указании каких-то экзотических имен шрифтов есть вероятность, что их не будет на машине пользователя. Поэтому лучше обходиться распространенными или, в крайнем случае, подключать такие шрифты с помощью At-правила @font-face.
Синтаксис
font-family: [[имя шрифта | семейство] [,имя шрифта | семейство]*] | inherit
Пример CSS: использование font-family
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS свойство font-family</title>
<style type="text/css">
#san { font-family: Arial, Verdana, sans-serif }
#ser { font-family: 'Times New Roman', serif }
#fan { font-family: fantasy }
</style>
</head>
<body>
<p>Шрифт Arial, если его нет, то Verdana, если и его нет, то sans-serif.</p>
<p>Шрифт Times New Roman, если нет, то serif.</p>
<p>Шрифт семейства fantasy.</p>
</body>
</html>Результат примера
Результат. Использование свойства CSS font-family в браузере Chrome.
В браузере Opera.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Да | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Да | Да | Да |
Internet Explorer 6.0 и 7.0 не понимают значение inherit.
CSS/Свойство font-family
Описание
Свойство font-family указывает семейство шрифтов применяемое для отображения текста элемента. При этом в качестве одного пункта из списка значений может быть указано как какое-либо определённое семейство шрифтов, так и общее семейство шрифтов.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | не используются; |
| Медиа: | визуальные. |
В CSS шрифты разбиваются на 5 общих семейств шрифтов:
- Общее семейство serif. Глифы шрифтов имеют засечки и, как правило, определённый интервал. Serif шрифты представляют собой «официальный» стиль текста и часто используются в официальных документах. Примеры семейств шрифтов: «Constantia», «Times New Roman», «Liberation Serif», «Droid Serif», «Century Schoolbook L», «FreeSerif», «Linux Libertine G», «Nimbus Roman No9 L». Символы с засечками и без
- Общее семейство sans-serif. Глифы шрифтов имеют низкую контрастность и простые штриховые окончания. Как правило, имеют определённый интервал. Примеры семейств шрифтов: «Droid Sans», «FreeSans», «Nimbus Sans L».
- Общее семейство cursive. Используется более неформальный стиль письменности. Текст выводимый с помощью таких шрифтов больше похож на надпись сделанную ручкой или кистью. Примеры семейств шрифтов: «Antonella script», «Monplesir script», «Rigoletto», «Alexandra Script», «Bickham Script Two», «Burlak», «Liana», «Aquarelle».
- Общее семейство fantasy. Включает в себя декоративные или выразительные шрифты, которые содержат выразительные или экспрессивные символы. (Они не включают в себя Pi или Picture шрифты, которые не имеют реальных символов.) Примеры семейств шрифтов: «Aurora», «CRYSIS», «Impact», «Masquerade», «Arnold BocklinC», «Benny Blanco», «elektrodisiac», «Epilog», «Crystal», «Wenatchee», «Young Love ES», «NERVOUS».
- Общее семейство monospace. Включает в себя шрифты с фиксированной шириной символов. Моноширинные шрифты часто используются для отображения образцов компьютерного кода. Примеры семейств шрифтов: «Liberation Mono», «FreeMono», «Nimbus Mono L», «Andale Mono», «Hack».
Одновременно через запятую можно указать сразу несколько различных семейств шрифтов (общих семейств шрифтов) [font-family: "Times New Roman", "Liberation Serif";]. При этом, если браузер не может применить первое семейство шрифтов, то предпринимаются попытки применить следующее семейство шрифтов, указанное в данном свойстве.
Примечание
Для обеспечения более надёжного исполнения замысла, авторам рекомендуется так же указывать общее семейство шрифтов [font-family: "Times New Roman", "Liberation Serif", serif;].
Если ни одно из указанных семейств шрифтов не может быть применено к тексту, то применяется либо общее семейство шрифтов (если оно указано), либо семейство шрифтов родительского элемента, либо семейство шрифтов, предусмотренное браузером в качестве значения по умолчанию.
Условия использования
Если в названии семейства шрифтов присутствуют пробелы, то название такого семейства должно быть заключено в кавычки. При этом рекомендуется заключать в кавычки все названия семейств шрифтов.
JavaScript
[объект]