@font-face | Свойства CSS - @-правила - Справочник CSS-3 - Каталог статей

Главная » Все материалы сайта » Справочник CSS-3 » @-правила

@font-face | Свойства CSS

Internet Explorer		Chrome	Opera		Safari	Firefox	Android	iOS
6.0+	9.0+	2.0+	9.0+	12.0+	4.0+	3.5+	2.1+	2.0+

Краткая информация

Значение по умолчанию	Нет
Ссылка на спецификацию	http://www.w3.org/TR/css3-fonts/#font-face-rule

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.

Синтаксис

@font-face { свойства шрифта }

Значения

Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI), где URI — относительный или абсолютный путь к файлу.

Пример

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>@font-face</title>
 <style>
 @font-face {
 font-family: "Monotype Corsiva"; /* Имя шрифта */
 src: url(/CSS_3/img_css_3/MTCORSVA.TTF); /* Путь к файлу со шрифтом */
 }
 P {
 font-family: "Monotype Corsiva";
 }
 </style>
 </head>
 <body>
 <p>Кластерное вибрато параллельно. Алеаторически выстроенный бесконечный канон с 
полизеркальной векторно-голосовой структурой диссонирует мнимотакт, благодаря быстрой 
смене тембров (каждый инструмент играет минимум звуков). Алеаторика, на первый взгляд, 
имитирует модальный лайн-ап, а после исполнения Утесовым роли Потехина в 
«Веселых ребятах» слава артиста стала всенародной. Еще Аристотель в своей «Политике» 
говорил, что музыка, воздействуя на человека, доставляет «своего рода очищение, 
то есть облегчение, связанное с наслаждением», однако октавер выстраивает райдер, но если бы песен 
было раз в пять меньше, было бы лучше для всех. Канал, как бы это ни казалось парадоксальным, 
просветляет флэнжер, благодаря употреблению микромотивов (нередко из одного звука, а также 
двух-трех с паузами). Адажио использует внетактовый пласт, в таких условиях можно спокойно 
выпускать пластинки раз в три года.</p>
 </body>
</html>

Результат этого примера в браузере Chrome показан на рис. 1.

Рис. 1. Собственный шрифт на странице

Браузеры

Браузер Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType).

Opera в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно. Это происходит в тех случаях, когда имя пользователя в Windows написано кириллицей.

Поделись ссылкой на эту страницу с друзьями:

Категория: @-правила | Добавил: free20860soft (04.03.2014)

Просмотров: 627 | Теги: свойства CSS, @правила | Рейтинг: 5.0/1

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]