@font-face | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Главная » Справочник CSS3 » Свойства шрифта


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


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

Правило @font-face для подключения шрифта по URL




Свойство правила @font-face предназначено для подключения шрифтов с сервера.На момент создания статьи не все браузеры адекватно поддерживали это свойство.Многое зависит от скорости инета пользователя и веса самого шрифта.Если браузер определяет время загрузки как невыполнимое,то шрифт проигнорируется.Свойство создано в CSS2,но проходит валидацию согласно версии CSS3.




Пример добавления в отдельный файл CSS


@font-face {
font-family:MarckScript-Regular;
src: local("MarckScript-Regular"),
url(/css/demo/file/shrift/MarckScript-Regular.ttf);
}
.MarckScript-Regular {
font-family:MarckScript-Regular;
font-size:16px;
color:#fff;
}

Пример применения


<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство @font-face</title>
<style type="text/css">
<!--
@font-face {
font-family:MarckScript-Regular;
src: local("MarckScript-Regular"),
url(/css/demo/file/shrift/MarckScript-Regular.ttf);
}
.MarckScript-Regular {
font-family:MarckScript-Regular;
font-size:16px;
color:#fff;
}
-->
</style>
</head>
<body>
<center>
<p class="MarckScript-Regular">Здесь применённый шрифт ( работает не всегда )</p>
</center>
</body>
</html>

Пример применения шрифта





Свойство работает в браузерах



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS2/fonts.html#font-descriptions
Категория: Свойства шрифта | Добавил: IZOTOP (04.04.2012) | Автор: Меренков Михаил E W
Просмотров: 1318 | Теги: css, @font-face, добавить шрифт, style, установить шрифт, изменить шрифт | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

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