УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS3 Шрифты


« Назад Далее »

С CSS3 веб дизайнеры более не ограничены использованием только безопасных веб шрифтов

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

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

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

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

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

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

Пример

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot') format("opentype"); /* IE */
}


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

Свойство Поддержка Браузерами
@font-face

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

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


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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

div
{
font-family:myFirstFont;
}

Попробуйте сами »


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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

@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:

Дескриптор Значения Описание
font-family название Обязательный параметр. Определяет название для шрифта
url адрес URL Обязательный параметр. Определяет адрес URL к файлу шрифта
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Не обязательный параметр. Определяет, как шрифт должен растягиваться. Значение по умолчанию равно "normal"
font-style normal
italic
oblique
Не обязательный параметр. Определяет стиль шрифта. Значение по умолчанию равно "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Не обязательный параметр. Определяет степень жирности шрифта. Значение по умолчанию равно "normal"
unicode-range уникод-диапазон Не обязательный параметр. Определяет диапазон символов УНИКОДА, которые поддерживает шрифт. Значение по умолчанию равно "U+0-10FFFF"






« Назад Далее »



© 2011 - 2022 Уроки CSS