Категория > Справочник CSS > @font-face

@font-face


23-03-2016, 12:59. Автор: Administrator
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 — относительный или абсолютный путь к файлу.

Пример

HTML5CSS2.1CSS3IECrOp 11Op 12SaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@font-face</title>
  <style>
   @font-face {
    font-family: Pompadur; /* Имя шрифта */
    src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
   }
   P {
    font-family: Pompadur;
   }
  </style>
 </head>
 <body>
  <p>Протяженность варьирует дорийский микрохроматический интервал, 
     но если бы песен было раз в пять меньше, было бы лучше для всех.</p>
 </body>
</html>

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

 


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

Браузеры

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

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


Перейти обратно к новости