Выбор семейства шрифтов в (X) HTML , CSS и производных системах определяет список приоритетных шрифтов и общих имен семейств; в сочетании с коррелирующими свойствами шрифта этот список определяет конкретное начертание шрифта, используемое для визуализации символов. Выбор семейства доступен в двух формах: в устаревшем (X) HTML- ...
элементе с его face
атрибутом и в свойстве CSS font-family
.
Семейство шрифтов терминов CSS совпадает с типографским шрифтом термина , который представляет собой группу шрифтов, определенных общими стилями дизайна. Шрифт является конкретным набором символов (символы) форм, дифференцированных от других шрифтов в той же семье дополнительных свойствами , такие как вес инсульта, наклонно, относительная ширина и т.д. Термин CSS лицо шрифта согласовано с «шрифтом»; это определяется комбинацией семейства шрифтов и дополнительных свойств.
И в HTML, и в CSS список разделен запятыми. Чтобы избежать неожиданных результатов, последнее семейство шрифтов в списке шрифтов должно быть одним из общих семейств, которые по умолчанию всегда доступны. Если шрифт не найден, веб-браузер будет использовать шрифт по умолчанию, который может быть определенным пользователем. В зависимости от веб-браузера пользователь может фактически переопределить шрифт, определенный автором кода. Это может быть связано с личным вкусом, но также может быть связано с некоторыми физическими ограничениями пользователя, такими как необходимость в большем размере шрифта или отказ от определенных цветов.
Помимо локальных шрифтов, современные веб-браузеры поддерживают связывание файлов пользовательских шрифтов напрямую с помощью @font-face
объявления. После включения такие шрифты могут быть перечислены в font-family
свойстве вместе со всеми локальными и резервными шрифтами.
Примеры
В следующем примере одно и то же начертание шрифта ( Times или шрифт с засечками по умолчанию , 14 пунктов, курсив) определяется тремя способами:
- С CSS в отдельной таблице стилей.
- Со встроенным CSS, применяемым к элементу через
style
атрибут. - С устаревшим презентационным элементом
...
и его нестандартным атрибутомface
. (...
в целом не рекомендуется, но его использование в презентациях.)
. текст { font-family : times , serif ; размер шрифта : 14 пт ; стиль шрифта : курсив ; }
< p class = "text" >Образец текста, отформатированного с помощью CSS, в отдельной таблице стилей.p >< p style = "font-family: times, serif; font-size: 14pt; font-style: italic" >Пример текста, отформатированный с помощью встроенного CSS.p >< p > < i > < font face = "times, serif" size = "3" >Пример текста, отформатированный с использованием устаревшего тега FONT.font > i > p >
Это лучшая практика , чтобы поставить пробел после запятой, и поставить любое имя , содержащее пробелы между кавычками.
Название шрифта как фамилия
Хотя CSS пытается определить семейство шрифтов как то же самое, что и гарнитура, font-family
запись и ее нестандартный предшественник HTML также исторически использовались для идентификации всего начертания шрифта . Такое использование связано с тем, что файлы шрифтов не описывают себя как часть семейства, частично мотивировано тем фактом, что немногие редакторы в то время поддерживали выбор из более чем четырех стилей шрифтов (полужирный / обычный и курсив / обычный).
В результате раньше было обычным явлением видеть такие объявления font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9'
вместо педантично правильного font-family: 'Gill Sans', 'Heisei Mincho'; font-weight: 900
. Ни CSS2, ни CSS3 не поддерживают такое использование (они не встречаются в примерах), но, тем не менее, большинство браузеров принимают их как допустимые «имена».
Общие шрифты
Семейство шрифтов может использовать определенный именованный шрифт (например, Heisei Mincho W9 ), но результат зависит от шрифтов, установленных на пользовательском компьютере. Фактический внешний вид будет зависеть от браузера и шрифтов, установленных в системе. [1] Например, при установке Firefox по умолчанию в Microsoft Windows оба шрифта с засечками будут отображаться как Times New Roman , а шрифты без засечек - как Arial .
Обычно лишь небольшая их часть, в основном «Засечки», «Без засечек», «Моноширинный» и «Курсив» [2] , легко настраиваются пользователем в веб-браузерах.
Многие системы также выполняют замену шрифтов в специальном регистре для замены отсутствующих «хорошо известных» семейств на альтернативы, совместимые с метрикой . Например, Windows заменяет Helvetica на Arial, а Times на Times New Roman. [3] Эти семейства не являются общими в смысле CSS и обычно не обрабатываются на уровне браузера.
Примеры семейств шрифтов
В следующей таблице приведены примеры некоторых общих семейств в CSS. Ряды розового цвета нестандартны и не должны использоваться.
Шрифт | Пример (вид зависит от установленных шрифтов) [заглавные буквы, предложения, цифры, греческий, арабский, русский] |
---|---|
Курсив | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Декоративные | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Фантазия | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Fraktur | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Моноширинный | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Роман | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Без засечек | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Засечки | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Сценарий | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Следующая таблица представляет собой образец некоторых гарнитур, указанных в CSS. В случае, когда гарнитура выпущена под несколькими именами «семейства шрифтов», дополнительные имена связываются в резервной копии.
Шрифт | Пример (вид зависит от установленных шрифтов) [заглавные буквы, предложения, цифры, греческий, арабский, русский] |
---|---|
Агентство FB | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Альбертина | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Antiqua | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Архитектор | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Arial | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
БанкФутуристический | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
БанкГотика | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Blackletter | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Благовест | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Калибри | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Comic Sans MS | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Consolas | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Курьер | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Garamond | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Грузия | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Helvetica | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Влияние | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Миньон | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Современный | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Open Sans | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Палатино | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Perpetua | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Швейцарский | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Тахома ?? | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Раз | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Times New Roman | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Tw Cen MT | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Вердана | ABCDEFGHIJKLMNOPQRSTUVWXYZ Быстрая коричневая лисица перепрыгивает через ленивую собаку. 0123456789 αβγ عربي язык |
Смотрите также
- Основные шрифты для Интернета
- Список гарнитур
- Презентационная разметка
- Веб-типографика
Заметки
- ^ «Шрифты» . W3.org . Проверено 21 сентября 2013 .
- ^ очень немногие веб-браузеры, включая Konqueror , поддерживают изменение Cursive
- ^ «Шрифтовые технологии - глобализация» . docs.microsoft.com .