Таблица курсов

Дополнительные руководства по CSS

• Дополнительная литература по CSS
• Введение в CSS
• Основные синтаксис CSS
• Продвинутый синтаксис CSS
• Производные селекторы CSS
• Селекторы id CSS
• Селекторы класса CSS
• Создание CSS
• Фон CSS
• Текст CSS
• Шрифты CSS
• Списки CSS

Модели рамок CSS

• Обзор фреймворка CSS
• Внутренние поля CSS
• Края CSS
• Внешние поля CSS
• Слияние внешних полей CSS

Позиционирование CSS

• Обзор позиционирования CSS
• Относительное позиционирование CSS
• Абсолютное позиционирование CSS
• Флэш CSS

Выборщики CSS

• Селекторы элементов CSS
• Группировка селекторов CSS
• Подробное описание селекторов класса CSS
• Подробное описание селекторов id CSS
• Подробное описание селекторов атрибута CSS
• Селекторы потомков CSS
• Селекторы детей CSS
• Селекторы соседних братьев CSS

Дополнительные курсы

Рекомендации по курсам:

• Кейсбокс CodeW3C.com

CSS-свойства шрифта определяют семейство шрифтов, размер, жирность, стиль (например, курсив) и трансформации (например, строчные заглавные буквы).

Серии шрифтов CSS

В CSS существует два типа названий семейств шрифтов:

• Общие семейства шрифтов - комбинации систем шрифтов с схожим внешним видом (например, "Serif" или "Monospace")
• Конкретные семейства шрифтов - конкретные семейства шрифтов (например, "Times" или "Courier")

Кроме различных конкретных семейств шрифтов, CSS определяет 5 общих семейств шрифтов:

• Шрифты Serif
• Шрифты Sans-serif
• Шрифты Monospace
• Шрифты Cursive
• Шрифты Fantasy

Если вам нужно узнать больше о семействах шрифтов, пожалуйста, прочитайте Серии шрифтов CSS.

Указание семейства шрифтов

Использование Атрибут font-family Определение семейства шрифтов текста.

Использование общих семейств шрифтов

Если вы хотите, чтобы документ использовал sans-serif шрифт, но не заботитесь о том, какой именно шрифт использовать, вот одно подходящее объявление:

body {font-family: sans-serif;}

h2 {font-size:2.5em;}

Таким образом, пользовательский агент выберет шрифт из семейства sans-serif (например, Helvetica) и применит его к элементу body. Благодаря наследованию, этот выбор шрифта также будет применяться ко всем элементам, содержащимся в элементе body,除非 будет использоваться более конкретный селектор для его замены.

Указание семейства шрифтов

Кроме использования общих семейств шрифтов, вы также можете определить более конкретные шрифты через атрибут font-family.

Ниже приведен пример, устанавливающий шрифт Georgia для всех элементов h1:

h1 {font-family: Georgia;}

h2 {font-size:2.5em;}

Такое правило также может привести к другой проблеме, если пользовательский агент не имеет установленного шрифта Georgia, то для отображения элемента h1 будет использоваться системный шрифт пользователя.

Мы можем решить эту проблему, комбинируя конкретное имя шрифта и общее семейство шрифтов:

h1 {font-family: Georgia,} serif;}

h2 {font-size:2.5em;}

Если читатель не установил Georgia, но установил шрифт Times (один из шрифтов в семействе serif), пользовательский агент может использовать Times для элемента h1. Хотя Times и не полностью соответствует Georgia, но по крайней мере достаточно близок.

Поэтому мы рекомендуем предоставлять общую семейство шрифтов во всех правилах font-family. Это обеспечивает резервный вариант, чтобы выбрать候选ный шрифт, если пользовательский агент не может предоставить конкретный шрифт, соответствующий правилу.

Если вы очень хорошо знакомы с шрифтами, вы также можете определить набор аналогичных шрифтов для заданного элемента. Для этого нужно упорядочить эти шрифты по приоритету и соединить их запятыми:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

h2 {font-size:2.5em;}

В соответствии с этим списком пользовательский агент будет искать эти шрифты в указанном порядке. Если все перечисленные шрифты недоступны, будет выбран простым образом доступный serif шрифт.

Использование кавычек

Вы, возможно, уже заметили, что в приведенных выше примерах используются одинарные кавычки. Необходимо использовать кавычки в объявлении font-family, если имя шрифта содержит один или несколько пробелов (например, New York), или если имя шрифта включает символы, такие как # или $.

Могут быть использованы как одинарные, так и двойные кавычки. Но если font-family свойство находится в style атрибуте HTML, то нужно использовать кавычки, которые не используются в этом свойстве:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...

h2 {font-size:2.5em;}

Стиль шрифта

Свойство font-styleЧасто используется для определения наклонного текста.

У этого свойства три значения:

• обычный - текст отображается normalmente
• курсив - текст отображается в виде курсива
• наклонный - текст отображается наклонно

Сочетание процента и em

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

h2 {font-size:2.5em;}

Разница между курсивом и наклонным текстом

Свойство font-style очень просто: используется для выбора между обычным текстом, курсивом и наклонным текстом. Единственная сложность - это明确了 курсивный и наклонный текст.

Курсив (italic) - это простой стиль шрифта, который делает некоторые små изменениы в структуре каждой буквы, чтобы отразить измененное внешнее представление. В отличие от этого, наклонный текст (oblique) - это наклоненная версия обычного прямого текста.

В большинстве случаев, курсив и наклонный текст выглядят одинаково в веб-браузерах.

Изменение шрифта

Свойство font-variantМаленькие заглавные буквы можно установить.

Маленькие заглавные буквы не являются обычными заглавными или строчными буквами, они используют заглавные буквы различных размеров.

Сочетание процента и em

p {font-variant:small-caps;}

h2 {font-size:2.5em;}

Жирность шрифта

Свойство font-weightНастройка толщины текста.

Использование ключевого слова bold можно использовать для установки текста в粗ый вид.

Ключевые слова 100 ~ 900指定了9 уровней жирности шрифта. Если в корпусе встроены эти уровни жирности, эти числа напрямую соответствуют предопределенным уровням, 100 соответствует наиболее тонкому изменению шрифта, 900 - наиболее толстому.

Если установить элемент в более粗ый вид, браузер установит более толстый шрифт, чем значение, переданное по наследованию. Напротив, ключевое слово lighter приведет к уменьшению толщины шрифта.

Сочетание процента и em

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

h2 {font-size:2.5em;}

Размер шрифта

Свойство font-sizeНастройка размера текста.

Мощность управления размером текста важна в области веб-дизайна. Однако, вы не должны изменять размер текста, чтобы абзацы выглядели как заголовки, или заголовки как абзацы.

Всегда используйте правильные HTML-заголовки, например, используйте <h1> - <h6> для маркировки заголовков, используйте <p> для маркировки абзацев.

Значение font-size может быть абсолютным или относительным.

Абсолютное значение:

• Установить текст на указанный размер
• Не разрешать пользователям изменять размер текста во всех браузерах (не利于 доступности)
• Абсолютный размер полезен при определении физического размера вывода

Относительный размер:

• Настройка размера по отношению к окружающим элементам
• Разрешить пользователям изменять размер текста в браузере

Внимание:Если вы не установили размер шрифта, размер обычного текста (например, абзацев) по умолчанию составляет 16 пикселей (16px = 1em).

Использование пикселей для установки размера шрифта

Настройка размера текста с помощью пикселей позволяет полностью контролировать размер текста:

Сочетание процента и em

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

h2 {font-size:2.5em;}

В Firefox, Chrome и Safari можно изменить размер текста в приведенных выше примерах, но это не работает в Internet Explorer.

Хотя можно изменить размер текста с помощью инструментов масштабирования браузера, это实际上是 настройка всего страницы, а не только текста.

Использование em для установки размера шрифта

Чтобы избежать проблем с нерегулируемым текстом в Internet Explorer, многие разработчики используют единицы измерения em вместо пикселей.

W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

W3C рекомендует использовать единицы размера em.

1em равно текущему размеру шрифта. Если размер шрифта элемента составляет 16 пикселей, то для этого элемента 1em равно 16 пикселям. При установке размера шрифта значение em изменяется относительно размера шрифта родительского элемента./16=Браузеры по умолчанию устанавливают размер текста в 16 пикселей. Поэтому размер по умолчанию 1em составляет 16 пикселей.пикселей

Можно использовать следующую формулу для преобразования пикселей в em:/16=（Примечание: 16 равно размеру шрифта родительского элемента по умолчанию, предположим, что размер шрифта родительского элемента составляет 20px, тогда формула должна быть изменена:пикселей/20=

Сочетание процента и em

em
)
h1 {font-size:3.75em;} /* 60px/16=3.75em */

h2 {font-size:2.5em;}

h2 {font-size:2.5em;} /* 40px/16=2.5em */

p {font-size:0.875em;} /* 14px/16=0.875em */

В предыдущем примере размер текста в em единицах такой же, как размер текста в пикселях в предыдущем примере. Однако, если использовать единицы em, можно масштабировать размер текста во всех браузерах.

К сожалению, в IE все еще есть проблемы. При изменении размера текста он будет больше или меньше, чем нормальный размер.

Сочетание процента и em

С方案, который действует во всех браузерах, для элемента body (родительского элемента) устанавливается значение по умолчанию для font-size в процентах:
Пример
body {font-size:100%;}
h1 {font-size:3.75em;}

h2 {font-size:2.5em;}

p {font-size:0.875em;}

CSS свойства шрифта

Инструменты

Референсное руководство по CSS

Примеры CSS

Тесты CSS

Тutorиалы по CSS

Ссылки спонсоров