Обратите внимание, что
Содержимое
Установка свойств шрифта будет одним из самых распространённых и используемых свойств таблиц стилей. К сожалению, не существует чётко определенной и общепринятой классификации шрифтов, так как условия, относящиеся к одному семейству шрифтов, могут не подходить другим. Например, 'italic' обычно используется для обозначения наклонного текста, но наклонный текст также может быть обозначен как Oblique, Slanted, Incline, Cursive или Kursiv. Поэтому отображение выбора обычного свойства шрифта для конкретного шрифта является не простой задачей.
Так как не существует общепринятой, универсальной классификации свойств шрифта, то согласование свойств вариантов шрифта должно производится с осторожностью. Свойства сопоставляются в строго определённом порядке, чтобы гарантировать, что результаты этого процесса сопоставления являются как можно более последовательными для всех агентов пользователей (при условии, что они имеют одну и ту же библиотеку шрифтов).
(Представленный выше алгоритм может быть оптимизирован для того, чтобы избежать необходимость повторять свойства CSS 2.1 отдельно для каждого символа.)
Для каждого свойства, правила согласуются с (2) представленным выше алгоритмом, следующим образом:
| Значение: | [[ <название-семейства> | <общее-семейство> ] [, <название-семейства> | <общее-семейство>]* ] | inherit |
| Значение по умолчанию: | зависит от агента пользователя |
| Применяется: | ко всем элементам |
| Наследование: | присутствует |
| Проценты: | N/A |
| Медиа: | визуальные |
| Вычисляемое значение: | как указано |
Значением свойства является приоритетный список имён семейств шрифтов и/или общих семейств шрифтов. В отличие от большинства других свойств CSS, значения разделяются запятой, чтобы показать, что они являются альтернативами:
body { font-family: Gill, Helvetica, sans-serif }
Несмотря на то, что многие шрифты содержат глиф отсутствующего символа, не стоит рассчитывать на его использование вместо символов, которых нет в шрифте. (Однако следует считать, что U+FFFD соответствует отсутствующему символу симолов кодировки).
Существует два типа указания семейства шрифтов:
Дизайнерам таблиц стилей, рекомендуется указывать название общего семейства шрифтов в качестве последней альтернативы. Названия общих семейств шрифтов являются ключевыми словами и по этому они НЕ должны заключаться в кавычки.
Имена семейств шрифтов либо должны быть заключены в кавычки как строки, либо должны быть без кавычек в виде последовательности из одного или более идентификаторов. Это означает, что большинство знаков препинания и цифр в начале каждого названия должны быть экранированы в имена семейств шрифтов без использования кавычек.
Например, следующие объявления недопустимы:
font-family: Red/Black, sans-serif; font-family: "Lucida" Grande, sans-serif; font-family: Ahem!, sans-serif; font-family: test@foo, sans-serif; font-family: #POUND, sans-serif; font-family: Hawaii 5-0, sans-serif;
Если последовательность идентификаторов задаётся в виде имён семейств шрифтов, то значение этих имён преобразуется в строку путём присоединения всех идентификаторов в определённой последовательности с помощью одиночных пробелов.
Чтобы избежать ошибок в объявлениях, имена семейств шрифтов, содержащие пробелы, цифры или знаки препинания, кроме дефиса рекомендуется заключать в кавычки:
body { font-family: "New Century Schoolbook", serif }
<BODY STYLE="font-family: '21st Century', fantasy">
Имена семейств шрифтов, которые имеют такое же название, как и значение ключевого слова ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy', и 'cursive') должны быть заключены в кавычки, чтобы избежать путаницы между ключевыми словами и такими же именами. Ключевые слова 'initial' и 'default' зарезервированы для будущего использования и в случае присутствия в названиях шрифтов так же должны подчиняться этому правилу. Агенты пользователей не должны рассматривать эти ключевые слова, как соответствующий тип '<название-семейства>'.
Общее семейство шрифтов являются резервным механизмом, средством сохранения замысла автора в виде определённых таблиц стилей в немного худшем варианте, когда ни один из указанных шрифтов не может быть выбран. Для обеспечения оптимального типографского контроля, в таблицах стилей так же должны использоваться названия шрифтов.
Все пять общих семейств шрифтов существуют во всех CSS реализациях (при этом не обязательно, что они будут отображаться для пяти различных фактических шрифтов). Агенты пользователей должны обеспечить разумные варианты по умолчанию для общих семейств шрифтов, которые выражают характеристики каждого семейства, а также возможностей в рамках, разрешённых применяемой технологии.
Агентам пользователей предлагается возможность разрешить пользователям самим выбирать альтернативы для общих шрифтов.
Глифы шрифтов serif, название которого в CSS используется в качестве термина, как правило, имеют завершающие штрихи, с расклешёнными или сужающимися концами, или с фактическими засечками окончаний (в том числе с кусочками засечек). Serif шифты, как правило, имеют определённый интервал. Они часто проявляют больше различий между толстыми и тонкими штрихами, чем шрифты общего семейства 'sans-serif'. В CSS термин 'serif' используется применительно к шрифтам любой письменности, хотя некоторые другие названия могут быть более знакомы для определённых видов письма, например, такие как Mincho (Японский), Sung или Song (Китайский), Totum или Kodig (Корейский). Любой шрифт, описанный таким образом, может быть использован для представления общего 'serif' семейства.
Примеры шрифтов, удовлетворяющих этому описанию:
| Латинские шрифты | Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit |
| Греческие шрифты | Bitstream Cyberbit |
| Кириллические шрифты | Adobe Minion Cyrillic, Excelsior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinist |
| Еврейские шрифты | New Peninim, Raanana, Bitstream Cyberbit |
| Японские шрифты | Ryumin Light-KL, Kyokasho ICA, Futo Min A101 |
| Арабские шрифты | Bitstream Cyberbit |
| Чероки шрифты | Lo Cicero Cherokee |
Глифы шрифтов sans-serif, название которого в CSS используется в качестве термина, как правило, имеют завершающие штрихи, которые являются однотонными -- с небольшими бликами или без них, с пересекающимися штрихами или с другими орнаментами. Sans-serif шрифты, как правило, имеют определённый интервал. Многие шрифты из данного семейства обладают небольшим количеством различий между толстыми и тонкими штрихами, по сравнению с шрифтами общего семейства 'serif'. В CSS термин 'sans-serif' используется применительно к шрифтам любой письменности, хотя некоторые другие названия могут быть более знакомы для определённых видов письма, таких как Gothic (Японский), Kai (Китайский), Pathang (Корейский). Любой шрифт, описанный таким образом, может быть использован для представления общего 'sans-serif' семейства.
Примеры шрифтов, удовлетворяющих этому описанию:
| Латинские шрифты | MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica |
| Греческие шрифты | Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek |
| Кириллические шрифты | Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion |
| Еврейские шрифты | Arial Hebrew, MS Tahoma |
| Японские шрифты | Shin Go, Heisei Kaku Gothic W5 |
| Арабские шрифты | MS Tahoma |
Глифы в шрифтах cursive, название которого в CSS используется в качестве термина, как правило, имеют либо соединяющие штрихи, либо другие рукописные элементы, помимо самого курсивного шрифта. При этом символы частично или полностью связаны, и в результате запись больше похожа на надпись сделанную ручкой или кистью, чем на напечатанную надпись. Шрифты для некоторых письменностей, например, таких как арабская, почти всегда выводятся скорописью. В CSS термин 'cursive' используется применительно к шрифтам любой письменности, хотя некоторые другие названия, такие как Chancery, Brush, Swing и Script также используются в названиях таких шрифтов.
Примеры шрифтов, удовлетворяющих этому описанию:
| Латинские шрифты | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery |
| Кириллические шрифты | ER Architekt |
| Еврейские шрифты | Corsiva |
| Арабские шрифты | DecoType Naskh, Monotype Urdu 507 |
Fantasy шрифты, используемые в CSS, в первую очередь являются декоративными, несмотря на то, что по-прежнему содержат образ символов (в отличие от Pi или Picture шрифтов, которые не отражают символы). Примеры:
| Латинские шрифты | Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz |
Единственным критерием monospace шрифта является то, что все символы имеют одинаковую фиксированную ширину. (Это семейство может сделать вид некоторых письменностей, например, таких как арабская, очень специфическим.) Этот эффект похож на шрифт пишущей машинки и часто используется, чтобы выделить образцы компьютерного кода.
Примеры шрифтов, удовлетворяющих этому описанию:
| Латинские шрифты | Courier, MS Courier New, Prestige, Everson Mono |
| Греческие шрифты | MS Courier New, Everson Mono |
| Кириллические шрифты | ER Kurier, Everson Mono |
| Японские шрифты | Osaka Monospaced |
| Чероки шрифты | Everson Mono |
| Значение: | normal | italic | oblique | inherit |
| Значение по умолчанию: | normal |
| Применяется: | ко всем элементам |
| Наследование: | присутствует |
| Проценты: | N/A |
| Медиа: | визуальные |
| Вычисляемое значение: | как указано |
Свойство 'font-style' выбирает между нормальным (иногда обозначают "roman"или"upright"), курсивным и наклонным вариантом семейства шрифтов.
Значение 'normal' выбирает шрифт, который в базе данных агента пользователя классифицирован как 'normal', тогда как 'oblique' выбирает шрифт, который имеет обозначение 'oblique'. Значение 'italic' выбирает шрифт, который имеет обозначение 'italic', или, если его использование не возможно, то используется обозначение 'oblique'.
Шрифт, который в базе данных шрифтов агента пользователя(-ей) обозначен как 'oblique' может быть сгенерирован путём обычного наклона нормального шрифта.
Шрифты, в названии которых присутствуют слова Oblique, Slanted или Incline обычно в безе данных шрифтов агента пользователя(-ей) помечаются как 'oblique'. Шрифты, в названии которых присутствуют слова Italic, Cursive или Kursiv обычно помечаются как 'italic'.
h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }
В приведённом выше примере, текст, выделенный в переделах 'H1' будет отображаться нормальным шрифтом.
| Значение: | normal | small-caps | inherit |
| Значение по умолчанию: | normal |
| Применяется: | ко всем элементам |
| Наследование: | присутствует |
| Проценты: | N/A |
| Медиа: | визуальные |
| Вычисляемое значение: | как указано |
Другим типом изменений в пределах одного семейства шрифтов является капитель. В капитель шрифте строчные буквы выглядят как символы верхнего регистра, но они имеют меньший размер и немного другие пропорции. С помощью свойства 'font-variant' можно выбирать такой шрифт.
Значение 'normal' устанавливает шрифт, который не является капителью, а вот 'small-caps' устанавливает капитель шрифт. CSS 2.1 допустима (но не обязательна) ситуация при которой, капитель шрифт может быть создан путём замены строчных букв нормального шрифта на масштабированные символы верхнего регистра. В качестве последнего средства, прописные буквы будут использованы в качестве замены капители.
В следующем примере, символы содержащиеся в 'H3' будут отображены капителью с выделением небольшой части слов наклонным шрифтом, а так же выделением наклонной капителью слов расположенных в 'H3' элементе:
h3 { font-variant: small-caps }
em { font-style: oblique }
В семействе шрифтов могут быть и другие варианты, например, такие как шрифты с цифрами в старинном стиле, капитель цифрами, в виде уплотненных или разреженных букв и прочие. Но CSS 2.1 не имеет свойств, позволяющих выбрать их.
Примечание: поскольку это свойство работает с текстом, который будет преобразован в верхний регистр, то для достижения такого же эффекта так же можно применять свойство 'text-transform'.
| Значение: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | |
| Значение по умолчанию: | normal | |
| Применяется: | ко всем элементам | |
| Наследование: | присутствует | |
| Проценты: | N/A | |
| Медиа: | визуальные | |
| Вычисляемое значение: | смотрите текст |
Свойство 'font-weight' позволяет выбрать жирность шрифта. Значения от '100' до '900' образуют упорядоченную последовательность, где каждое число обозначает жирность, которая, по крайней мере, имеет как минимум такую же жирность, как и его предшественник. Ключевое слово 'normal' аналогично значению '400', а 'bold' аналогично значению '700'. Ключевые слова 'normal' и 'bold', как было показано, часто путают с названиями шрифтов, поэтому была так же добавлена цифровая шкала со списком из 9-и значений.
p { font-weight: normal } /* 400 */
h1 { font-weight: 700 } /* bold */
Значения 'bolder' и 'lighter' указывают жирность, которая вычисляется в зависимости от значения, наследуемого от родительского элемента:
strong { font-weight: bolder }
Шрифты (данные шрифтов), как правило, имеют одно или несколько свойств, значениями которых являются имена, которые характеризуют «жирность» шрифта. Там нет общепринятого, универсального смысла для таких указывающих на жирность названий. Их основная роль состоит в том, чтобы различать варианты отличающиеся жирностью в пределах одного семейства шрифтов. Один из вариантов – это использование разных семейств шрифтов; например шрифт о котором можно подумать как о жирном может быть описан как Regular, Roman, Book, Medium, Semi- или DemiBold, Bold или Black, в зависимости от того, как выглядит дизайн начертаний чёрного «normal» шрифта. В виду того что нет единого стандарта в используемых именах, значения свойства жирности в CSS1 приведены в виде числовой шкалы, в которой значение '400' (или 'normal') соответствует текстовому обозначению «normal» для данного семейства. Имя, указывающее на жирность и отображающееся подобным образом, как правило, обозначается Book, Regular, Roman, Normal или иногда Medium.
Ассоциации с другими обозначениями жирности в семействе с числовыми значениями жирности предназначены только для сохранения порядка увеличения жирности в этом семействе. Однако следующие эвристические правила раскрывают, как делается уступка в данном случае:
При сопоставлении жирности семейств(-а) шрифтов с CSS шкалой, отсутствующие значения жирности назначаются следующим образом:
Следующие два примера показывают стандартное отображение.
Предположим, что семейство «Rattlesnake» имеет четыре варианта жирности, от менее жирной версии до более жирной: Regular, Medium, Bold, Heavy..
| Доступные варианты | Назначение | Распределение оставшихся |
|---|---|---|
| «Rattlesnake Regular» | 400 | 100, 200, 300 |
| «Rattlesnake Medium» | 500 | |
| «Rattlesnake Bold» | 700 | 600 |
| «Rattlesnake Heavy» | 800 | 900 |
Предположим, что семейство «Ice Prawn» имеет шесть вариантов жирности: Book, Medium, Bold, Heavy, Black, ExtraBlack. Обратите внимание, что в данном примере агент пользователя решил не задавать числовое значение для «Ice Prawn ExtraBlack».
| Доступные варианты | Назначение | Распределение оставшихся |
|---|---|---|
| «Ice Prawn Book» | 400 | 100, 200, 300 |
| «Ice Prawn Medium» | 500 | |
| «Ice Prawn Bold» | 700 | 600 |
| «Ice Prawn Heavy» | 800 | |
| «Ice Prawn Black» | 900 | |
| «Ice Prawn ExtraBlack» | (нет) |
Значения 'bolder' и 'lighter' указывают значения, которые рассчитываются исходя из значения степени жирности родительского элемента. Исходя из наследуемого значения жирности, жирность рассчитывается при помощи приведённой ниже таблицы. Дочерние элементы наследуют значение исходя из расчёта жирности, а не значения 'bolder' или 'lighter'.
| Наследуемое значение | увеличенное | уменьшенное |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
В приведённой выше таблице приведена схема соответствующего выбора следующей степени жирности относительно bolder или lighter значения, учитывая, что семейство шрифтов содержит нормальные и жирные версии наряду с тонким и более жирными вариантами. Авторы, желающие осуществлять более тщательный контроль над точными значениями жирности, используемыми для определённого элемента, должны использовать числовые значения, а не относительные значения жирности.
Нет никакой гарантии, что для каждого 'font-weight' значения будет существовать свой вариант жирности; например, некоторые шрифты могут иметь только нормальную и жирную версию, в то время как другие шрифты могут иметь восемь различных вариантов жирности. Нет никакой гарантии, что агент пользователя будет отображать смейство шрифтов в определённом значении жирности. Единственной гарантией является то, что отображаемая версия при заданном значении не будет более жирной, чем отображаемая версия менее жирных значений.
| Значение: | <абсолютный-размер> | <относительный-размер> | <длина> | <проценты> | inherit |
| Значение по умолчанию: | medium |
| Применяется: | ко всем элементам |
| Наследование: | присутствует |
| Проценты: | смотрим текст по теме наследования размера шрифта |
| Медиа: | визуальное |
| Вычисляемое значение: | абсолютная длина |
Размер шрифта соответствует em площади, согласно типографической концепции. Обратите внимание, что некоторые глифы могут выходить за пределы своих em площадей. Значения имеют следующий смысл:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
В следующей таблице приведены рекомендации агенту пользователя по отображению абсолютных размеров HTML заголовков и абсолютных размеров-шрифтов. Значение 'medium' является размером шрифта, который выбирается пользователем и используется в качестве исходного среднего значения.
| CSS значения абсолютного-размера | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| HTML размеры шрифтов | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Разработчики должны построить таблицу коэффициентов масштабирования для ключевых слов абсолютного-размера относительно значения 'medium', а так же относительно конкретного устройства и его характеристик (например, разрешения устройства).
Разным медиа могут требоваться разные коэффициенты масштабирования. Кроме того, агент пользователя при вычислении таблицы должен принять во внимание качество и доступность шрифтов. Таблица может отличаться в зависимости от семейства шрифтов.
Примечание 1. Чтобы сохранить читаемость, агенту пользователя при применении этих рекомендаций следует, избегать создания размера-шрифта для дисплея компьютера размером менее чем 9 пикселей на одну EM единицу дисплея компьютера.
Примечание 2. В CSS1 рекомендованный коэффициент масштабирования между соседними индексами составлял 1.5, но согласно пользовательскому опыту такой коэффициент масштабирования оказался слишком большим. В CSS2 рекомендованный коэффициент масштабирования для экрана компьютера между соседними индексами составляет 1.2, но такой коэффициент до сих пор создавал проблемы для небольших размеров. Опыт внедрения показал, что использование фиксированного коэффициента между соседними ключевыми словами абсолютного-размера вызывал определённые проблемы, и поэтому в данной спецификации нет рекомендации по поводу определённого фиксированного коэффициента.
Длина и процентные значения не должны принимать во внимание таблицу размеров шрифта при расчёте размера шрифта элемента.
Отрицательные значения не допускаются.
Во всех остальных свойствах, значения длины 'em' и 'ex' относятся к вычисляемому размеру шрифта текущего элемента. В свойстве 'font-size' эти единицы длины относятся к вычисляемому размеру шрифта родительского элемента.
Обратите внимание, что приложение может интерпретировать явный размер, в зависимости от контекста. Например, внутри VR сцены шрифт может получить другой размер из-за искажений.
Например:
p { font-size: 16px; }
@media print {
p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }
| Значение: | [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit |
| Значение по умолчанию: | смотрим значения отдельных свойств |
| Применяется: | ко всем элементам |
| Наследование: | присутствует |
| Проценты: | смотрим значения отдельных свойств |
| Медиа: | визуальные |
| Вычисляемое значение: | смотрим значения отдельных свойств |
Свойство 'font' за исключением случаев, описанных ниже, является сокращённым свойством для одновременного указания значений 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family' свойств в одном месте таблицы стилей. Синтаксис этого свойства основан на сокращении традиционной типографской записи для того, чтобы можно было одновременно задать несколько свойств, связанных со шрифтами.
Всем свойствам, связанным со шрифтами сначала присваиваются начальные значения, в том числе и тем, которые перечислены в предыдущем пункте. Затем этим свойствам, которым указываются определённые значения в сокращённой 'font' записи устанавливаются эти значения. Для определения допустимых и начальных значений смотрим ранее определённые свойства.
p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "New Century Schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }
Во втором объявлении, размер процентного значения шрифта ('80%') вычисляется относительно размера шрифта родительского элемента. В третьем объявлении, высота строки выраженная в процентах относится к размеру шрифта самого элемента.
В первых трёх объявлениях, представленных выше, свойства 'font-style', 'font-variant' и 'font-weight' прямо не упоминаются, и это значит, что им всем троим, установлены начальные значения ('normal'). Четвёртое объявление устанавливает 'font-weight' свойству значение 'bold', свойству 'font-style' значение 'italic' и свойству 'font-variant' неявно устанавливает значение 'normal'.
Пятое объявление задаёт значения свойствам 'font-variant' ('small-caps'), 'font-size' (120% относительно размера шрифта родительского элемента), 'line-height' (на 120% больше размера шрифта) и 'font-family' ('fantasy'). Отсюда следует, что ключевое слово 'normal' относится к двум оставшимся свойствам: 'font-style' и 'font-weight'.
Следующие значения относятся к системе шрифтов:
Система шрифтов может устанавливаться только при полноценном объявлении; то есть, должно быть указано семейство шрифтов, размер, жирность, стиль, и так далее, всем свойствам должны быть заданы значения. После, по желанию эти значения могут быть изменены по отдельности. Если шрифт с указанными характеристиками отсутствует на данном устройстве, то агент пользователя должен либо грамотно заменить его (например, уменьшенная версия 'caption' шрифта, может быть использована для замены 'small-caption' шрифта), либо вместо него агент пользователя должен использовать свой шрифт по умолчанию. Касаемо обычных шрифтов; если для системного шрифта, любое из индивидуальных свойств не является частью доступных пользовательских настроек операционной системы, то этим свойствам должны быть заданы начальные значения.
Вот почему это свойство «почти» сокращённое свойство: система шрифтов может быть указана только с помощью этого свойства, а не с помощью самого 'font-family', так что 'font' позволяет авторам указать больше настроек, чем все его подсвойства. Однако отдельные свойства, такие, как 'font-weight' по-прежнему устанавливают значения, взятые из системы шрифтов, которая также может быть независимо изменена.
button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }
Если в определённой системе шрифт используется для выпадающего меню и случается, например, так что этот шрифт является 9-ти пиксельным Charcoal, с жирностью 600, то элементы P, которые являются потомками BUTTON будут отображаться согластно указанному стилю:
button p { font: 600 9px Charcoal }
Поскольку 'font' является сокращённым свойством, то изменение любого свойства, которое не задано явно в его исходном значении, имеет тот же эффект, что и представленное ниже объявление:
button p {
font-family: Charcoal;
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 9px;
line-height: normal;
}