Путешественникам, меломанам, бизнесменам, вебмастерам, новости.

Главная сайта     Контакты     Поиск по сайту

Скачать справочники можно на isxodniki.ru

@font-face

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 9.0+ 2.0+ 9.0+ 4.0+ 1.8+ 2.1+ 2.0+

Краткая информация

Значение по умолчанию Нет
Ссылка на спецификацию /TR/CSS2/fonts.php#font-description s

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание





Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.

Синтаксис

@font-face { свойства шрифта }

Значения

Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(/css/URI), где URI — относительный или абсолютный путь к файлу.





Пример

HTML5CSS 2.1CSS 3IE 9Cr 15Op 11Sa 5Fx 8

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@font-face</title>
  <style>
   @font-face {
    font-family: Pompadur; /* Имя шрифта */
    src: url(/css/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 в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно.





Спонсоры сайта:

Поделиться ссылкой на эту страницу в Vkontakte, FaceBook, Одноклассниках и других социальных сетях:


Есть ли эта страница в памяти поисковиков?

Yandex ТИЦ:      Google PR:  

Скачать справочники можно на isxodniki.ru