|
Ноя
09
|
Редактирование шрифтов |
font
Описание
Универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.
Синтаксис
font: font-style || font-variant || font-weight || font-size || font-family
Аргументы
В качестве обязательных аргументов параметра font указывается размер шрифта и его семейство. Остальные аргументы являются опциональными и задаются при желании.
font-family
Описание
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Синтаксис
font-family: имя шрифта [, имя шрифта[, ...]]
Аргументы
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
• serif — шрифты с засечками (антиквенные), типа Times;
• sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
• cursive — курсивные шрифты;
• fantasy — декоративные шрифты;
• monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
Пример
H1 {
font-family: Geneva, Arial, Helvetica, sans-serif; /* Гарнитура текста */
}
font-size
Описание
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задают размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения этого параметра у родителя элемента.
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты
Аргументы
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Относительный размер шрифта задается аргументами larger и smaller.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
Пример
H1 {
font-size: 12px; /* Размер шрифта в пикселах */
}
font-style
Описание
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.
Синтаксис
font-style: normal | italic | oblique
Аргументы
normal
Обычное начертание текста.
italic
Курсивное начертание.
oblique
Наклонный шрифт. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
Пример
P {
font-style: italic; /* Курсивное начертание */
}
font-variant
Описание
Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью.
Синтаксис
font-variant: normal | small-caps
Аргументы
normal
Оставляет регистр символов исходным, заданным по умолчанию.
small-caps
Модифицирует все строчные символы как заглавные уменьшенного размера.
Пример
H1 {
font-variant: small-caps; /* Устанавливаем капитель для заголовка */
}
font-weight
Описание
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
Синтаксис
font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.
Значения
Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное, bolder — жирное; lighter — светлое, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.
Пример
H1 {
font-weight: normal; /* Нормальное начертание */
}
.select {
font-weight: 600; /* Жирное начертание */
}
Возможно, Вам будет полезна эта информация:
Новые комментарии