Em, проценты, и пункты, согласно css
Традиционно, единица измерения em эквивалентна высоте прописной буквы "M" в шрифте, к которому она применяется. Однако в CSS единица измерения em в действительности эквивалентна общей высоте одной строки; другими словами высоте элемента, font-size которого задан как 14 пикселей:
1em = 100% = 14px
В типичных рабочих средах это утверждение выше можно расширить до следующего:
1em = 100% = 14px = 10.5pt
Увеличение или уменьшение размеров работает мультипликативно, поэтому если имеется второй элемент, размер которого вы хотите задать как 16 пикселей, при условии обычного наследования все последующее предоставит требуемый результат:
1.143em = 114.3% ? 16px = 12pt
Краткое замечание об официальных Рекомендациях css 2.1
Иногда рекомендуют консультироваться в Рекомендациях спецификации CSS 2.1 Консорциума WWW (http://www.w3.org/TR/CSS21/). Подобно всем Рекомендациям W3C, этот документ можно считать определением стандарта Web; некоторые из которых реализуются более точно, чем другие производителями браузеров и разработчиками Web.
Хотя глубокое и всестороннее знание Рекомендаций W3C никогда не будет лишним, этот курс написан, чтобы предоставить краткое, но легко усваиваемое введение в Web разработку/дизайн, и рекомендации W3C могут оказаться слишком многословными, как минимум. Все случаи, когда рекомендуется обратиться к документам CSS 2.1, относятся к материалу, который слишком нечеткий, чтобы оправдать его точное объяснение в этой лекции.
Ключевые слова размеров
Как кратко упоминалось выше, можно использовать также ключевые слова размеров. Существует семь таких ключевых слов, от xx-small и до xx-large, со значением medium являющимся средним (и используемым по умолчанию) значением. Полный список всех семи значений представлен в таблице 29.3 ниже, которая содержит все ключевые слова, поддерживаемые различными свойствами CSS, рассматриваемыми в этой лекции.
Рекомендации CSS 2.1 содержат множество дополнительных подробностей о ключевых словах font-size (http://www.w3.org/TR/CSS21/fonts.html#font-size-props).
Пример таблицы стилей 1
По мере рассмотрения новых свойств CSS их применение демонстрируется на примере фрагмента текста, для оформления которого используется постепенно усложняющаяся таблица стилей. Законченная таблица стилей и окончательно оформленный текст показаны в конце лекции. В ходе изложения будут показаны только добавляемые новые правила. Исходный файл таблицы стилей имеет следующий вид.
body {
margin: 0;
padding: 0 20%;
font-size: 14px;
}
p {
margin: .429em auto;
}
q:before,
q:after {
content: "";
}
h1 {
font-size: x-large;
}
.sectionNote {
font-size: medium;
}
.attribution {
font-size: small;
}
Новые правила
body { font-size: 14px; }
h1 { font-size: x-large; }
.sectionNote { font-size: medium; }
.attribution { font-size: small; }
Выбор семейства шрифтов и гарнитуры
Выбрав требуемый размер текста, можно перейти к выбору гарнитуры шрифта. Это реализуется с помощью свойства font-family, которое используется как показано в примере 2 ниже.
При задании значения для свойства font-family необходимо следовать следующим правилам:
Гарнитуры должна называться точно так же, как они называются в библиотеке шрифтов клиентского хоста, используя невариантный (non-variant) шрифт в качестве указателя.
Все названные гарнитуры должны быть разделены запятыми, с последующим пробелом или без него.
В тех случаях, где имя гарнитуры содержит более одного слова, оно должно заключаться в одиночные или двойные кавычки. Например: 'Times New Roman'.
Гарнитуры должны указываться в порядке возрастающей вероятности доступности. Например, если вы хотите, чтобы пользователи Macintosh видели страницу, представленную шрифтом Palatino, то объявление значения свойства должно, вероятно, выглядеть следующим образом: font-family: Palatino, Georgia, serif;. Palatino является в точности тем, что требуется, но некоторые пользователи могут его не иметь; Georgia будет доступен с большей вероятностью и похож на Palatino; serif ссылается на базовый используемый по умолчанию шрифт с засечеками - если недоступен ни Palatino, ни Georgia, система вернется к своему используемому по умолчанию шрифту без засечек.
В качестве защиты от отказа значение font-family всегда должно заканчиваться подходящим базовым именем, как поясняется выше. Гарнитуры шрифтов, используемые в базовых семействах в MacOS 10.5, показаны на рисунке 29.1.
Рис. 29.1. Используемые по умолчанию "базовые" гарнитуры шрифтов в MacOS 10.5 при выводе размером 24px в браузере Safari 3.1.
Рекомендации CSS 2.1 перечисляют несколько дополнительных гарнитур шрифтов, которые могут применяться для каждого базового семейства (http://www.w3.org/TR/CSS21/fonts.html#generic-font-families).