САМОУЧКА

Сайт для тех, кто хочет научиться

Наши публикации

<Предыдущая Следующая>

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

CSS3 Свойство @font-face

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

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

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

Обратите внимание: браузеры IE9+, Chrome, Firefox, Opera и Safari поддерживают шрифты в формате .woff (Web Open FontFormat -
Открытый Формат Шрифтов Всемирной Паутины). Браузеры Chrome, Firefox, Opera и Safari также поддерживают шрифты в формате TTF и OTF, а IE в формате EOT.

Синтаксис:

@font-face {

font-family:opensans; /* Задаем имя шрифта */

src:url('opensans.woff') /* Указываем местонахождение нашего шрифта */

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

Пример

div

font-family:opensans;

Вы также можете добавить курсивное или жирное начертание к подключенному шрифту.

Для этого необходимо дополнительно добавить в @font-faceсвойство font-style:italic или font-weight:bold и указать путь к шрифту в соответствующем начертании.

Пример

/* Подключим курсивную версию шрифта */

@font-face {

font-family:"opensans";

font-style:italic;

src:url('opensans-italic.woff'),;

/* Подключим жирную версию шрифта */

@font-face {

font-family:"opensans";

font-style:bold;

src:url('opensans-bold.woff'),;

<Предыдущая Следующая>

Последние добавления

HTML для новичков

XHTML

CSS для новичков