web-development.ucoz.ru

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

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

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

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

Вам нужно будет описать выбранный шрифт с новым правилом CSS3 @font-face.

@font-face
{
 font-family: myFirstFont;
 src: url('Sansation_Light.ttf'),
 url('Sansation_Light.eot') format("opentype"); /* IE */
}

Использование нового шрифта

<style> 
@font-face
{
 font-family: myFirstFont;
 src: url('/tryit/Sansation_Light.ttf')
 ,url('/tryit/Sansation_Light.eot'); /* IE */
}

div
{
 font-family:myFirstFont;
}
</style>

Использование жирного текста

<style> 
@font-face
{
 font-family: myFirstFont;
 src: url('/tryit/Sansation_Light.ttf')
 ,url('/tryit/Sansation_Light.eot') format("opentype"); /* IE */
}

@font-face
{
 font-family: myFirstFont;
 src: url('/tryit/Sansation_Bold.ttf')
 ,url('/tryit/Sansation_Bold.eot') format("opentype"); /* IE */
 font-weight:bold;
}

div
{
 font-family:myFirstFont;
}
</style>

Дескрипторы шрифта CSS3

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