• CSS3 Уроки

• CSS3 Уроки
• CSS3 Введение
• CSS3 Границы
• CSS3 Фон
• CSS3 Текстовые Эффекты
• CSS3 Шрифты
• CSS3 2D Трансформации
• CSS3 3D Трансформации
• CSS3 Переходы
• CSS3 Анимация
• CSS3 Многоколоночная Верстка
• CSS3 Интерфейс Пользователя

• CSS3 Справочники

• CSS3 Справочник
• CSS3 Единицы Измерения
• CSS3 Значения Цветов
• CSS3 Названия Цветов
• CSS3 HEX Значения Цветов

CSS3 Правило @font-face

До CSS3 веб дизайнеры были вынуждены использовать шрифты, которые уже должны быть установлены на компьютерах пользователей.

С CSS3 веб дизайнеры могут использовать любой шрифт, какой им понравится.

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

Вам только потребуется описать выбранный вами шрифт с помощью нового в CSS3 правила @font-face.

В правиле @font-face вы определяете название для шрифта и адрес URL к файлу шрифта:

Поддержка Браузерами

Internet Explorer поддерживает только шрифты .eot (Embedded OpenType).

Firefox, Chrome, Safari и Opera поддерживают шрифты .ttf (True Type Font) и .otf (OpenType Font).

Использование Нового Шрифта

Для того, чтобы использовать новый шрифт, добавьте "myFirstFont" в качестве значения свойства font-family:

Пример div { font-family:myFirstFont; } Попробуйте сами »

Использование Жирного Текста

Вы должны добавить другое правило @font-face, содержащее дескрипторы для жирного текста:

Пример @font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'),      url('Sansation_Bold.eot') format("opentype"); /* IE */ font-weight:bold; }   Попробуйте сами »

Файл "Sansation_Bold.ttf" - это другой файл шрифта, который содержит жирные символы шрифта Sansation.

Браузеры будут использовать этот шрифт, как только будет указано, что фрагмент текста со свойством font-family установленным в "myFirstFont" должен отображаться жирным шрифтом.

Таким образом, вы можете создавать несколько правил @font-face для одного и того же шрифта.

CSS3 Дескрипторы Шрифта

Следующая таблица перечисляет дескрипторы шрифта, которые могут быть определены в правиле @font-face: