|
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:
Использование Жирного Текста
Вы должны добавить другое правило @font-face, содержащее дескрипторы для жирного текста:
Пример
@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" |
|
