CSS3 Шрифт

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

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

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

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

Шрифт, выбранный вами в новойCSS3версии, связан с@font-faceописанием правила.

Ваш «собственный» шрифт задается вCSS3 @font-faceправилах.

Поддержка браузеров

Цифры в таблице указывают первую версию браузера, поддерживающую это свойство.

Internet Explorer 9+, Firefox, Chrome, Safari и Opera поддерживают шрифт WOFF (Web Open Font Format).

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

Chrome, Safari и Opera также поддерживают SVG-шрифты.

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

Примечание:Internet Explorer 8 и более ранние версии не поддерживают новое правило @font-face.

Используйте нужный вам шрифт

В новом правиле @font-face сначала нужно определить имя шрифта (например, myFirstFont), а затем указать файл шрифта.

	Совет:Используйте имена шрифтов в нижнем регистре для URL-адресов; заглавные буквы могут привести к неожиданным результатам в IE

Чтобы использовать шрифт для элемента HTML, обратитесь к имени шрифта (myFirstFont) через свойство font-family:

Пример

<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>

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

Используйте полужирный текст

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

Пример

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }

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

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

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

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

Описание шрифта CSS3

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