@font-face

Содержание

Правило @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: Pompadur; /* Имя шрифта */
    src: url(font/pompadur.ttf); /* Путь к файлу со шрифтом */
   }
   P {
    font-family: Pompadur;
   }
  </style>
 </head>
 <body>
  <p>Протяженность варьирует дорийский микрохроматический интервал, 
     но если бы песен было раз в пять меньше, было бы лучше для всех.</p>
 </body>
</html>

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

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

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

Примечание

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

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

Спецификация

СпецификацияСтатус
WOFF File Format 2.0Рабочий проект
WOFF File Format 1.0Рекомендация
CSS Fonts Module Level 3Возможная рекомендация

Браузеры

Internet ExplorerChromeOperaSafariFirefox
5.59410123.13.5
AndroidFirefox MobileOpera MobileSafari Mobile
2.11105




Рекомендую хостинг: beget.ru

Сервер падал:113 дн. 2:12 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru