В HTML и XHTML свойство CSS font family используется для определения списка приоритетных шрифтов и общих имен семейств; в сочетании с соответствующими свойствами шрифта этот список определяет конкретную начертание шрифта, используемое для визуализации символов. Семейство шрифтов - это группа шрифтов, определяемая 9 общими стилями дизайна.
Шрифты, имеющие общий стиль оформления, обычно группируются в семейства шрифтов; Члены семейств шрифтов различаются отображением формы символа (толщина обводки, наклон, относительная ширина и т. Д.); начертание шрифта - это уникальная комбинация определенного семейства шрифтов и некоторых его свойств (свойств шрифта CSS).
Атрибут начертания шрифта, объединенный с другими атрибутами представления шрифта, может быть применен в HTML с помощью элемента deprecated font
.
.text {семейство шрифтов: раз, засечки; размер шрифта: 14pt; стиль шрифта: курсив; }
Образец текста, отформатированного с помощью CSS, в отдельной таблице стилей.
Пример текста, отформатированный с помощью встроенного CSS.
Пример текста, отформатированный с использованием устаревшего тега FONT.
Лучшая практика для значений семейства шрифтов CSS - разделять значения запятыми и пробелами, помещая значения из нескольких слов в кавычки.
.text {font-family: "calibri", Garamond, 'Comic Sans MS'; }
В CSS font-family
(или атрибут face
в HTML) - это предпочтительно упорядоченный список семейств шрифтов, используемых при визуализации текста. Список разделен запятыми (как показано выше). Чтобы избежать неожиданных результатов, последнее семейство шрифтов в списке шрифтов должно быть одним из общих семейств, которые по умолчанию всегда доступны в HTML и CSS. Если шрифт не найден, веб-браузер будет использовать шрифт по умолчанию, который может быть определенным пользователем. В зависимости от веб-браузера пользователь может фактически переопределить шрифт, определенный автором кода. Это может быть по причинам личного вкуса, но также может быть связано с некоторыми физическими ограничениями пользователя, такими как необходимость в большем размере шрифта или отказ от использования определенных цветов.
В дополнение к локальным шрифтам современные веб-браузеры поддерживают связывание файлов пользовательских шрифтов напрямую с помощью объявления @ font-face
. После включения такие шрифты могут быть перечислены в свойстве font-family
вместе со всеми локальными и резервными шрифтами.
Семейство шрифтов может использовать определенный именованный шрифт (например, Heisei Mincho W9), но результат зависит от шрифтов, установленных на пользовательском компьютере. Фактический внешний вид будет зависеть от браузера и шрифтов, установленных в системе. При установке по умолчанию для Firefox в Microsoft Windows, например, оба шрифта с засечками и Times будут отображаться как Times New Roman, и оба без -serif и Helvetica as Arial.
Обычно только небольшая часть из них, в основном Serif, Sans-serif, Monospace и Cursive, легко настраиваются пользователем в веб-браузерах.
Шрифт | Пример (вид зависит от установленных шрифтов) [заглавные буквы, предложения, цифры, греческий, арабский, русский] |
---|---|
Agency FB | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Альбертина | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Antiqua | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Архитектор | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي language |
Arial | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
BankFuturistic | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
BankGothic | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Blackletter | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Благовест | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Calibri | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Comic Sans MS | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Consolas | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Курьер | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي language |
Cursive | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Декоративный | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي language |
Fantasy | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лиса перепрыгивает через ленивую собаку. 0123456789 αβγ عربي language |
Fraktur | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Морозный | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Гарамонд | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Джорджия | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Helvetica | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Удар | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лиса перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Миньон | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Современный | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي language |
Monospace | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Open Sans | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Палатино | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Perpetua | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Роман | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Без засечек | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Serif | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Script | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Швейцарский | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Тахома ?? | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Times | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лиса перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Times New Roman | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Tw Cen MT | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي language |
Verdana | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |