Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

src

Свойство CSS src применяется для подключения и загрузки дополнительного шрифта, чтобы в дальнейшем обращаться к нему с помощью свойства font-family. Это бывает необходимо, когда автор решает использовать на странице не самый распространенный шрифт, которого с большой вероятностью может не быть на компьютере пользователя.

Тип свойства

Назначение: шрифты.

Применяется: внутри At-правила @font-face.

Значения

Значением свойства src является ключевое слово inherit либо определенные параметры служащие для подключения шрифта.

Процентная запись: не существует.

Значение по умолчанию: нет.

Форматы шрифтов и их описание
ФорматОписаниеРасширения
"truetype"Шрифты TrueType*.ttf
"opentype"Шрифты OpenType*.ttf, *.otf
"truetype-aat"Шрифты TrueType с расширениями Apple Advanced Typography*.ttf
"embedded-opentype"Шрифты Embedded OpenType*.eot
"svg"Шрифты SVG Font*.svg, *.svgz

Указание подключаемого шрифта происходит по следующим правилам:

Примеры свойства src:

src: url('fonts/bestfont.ttf');

src: url('fonts/bestfont.ttf') format("opentype"),
     url('fonts/superfont.ttf') format("opentype", "truetype-aat");

src: local('Arial'), local('Verdana'), url('fonts/arial.ttf') format("truetype");

Синтаксис

src: [url [format('формат шрифта'[, 'формат шрифта']*)] | local('имя шрифта')] [, url [format('формат шрифта'[, 'формат шрифта']*)] | local('имя шрифта')]*

Пример CSS: использование src

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство src</title>
  <style type="text/css">
   @font-face {
    font-family: "Dsnote"; /* имя шрифта */
    src: url('files/dsnote.ttf') format("truetype"); /* файл со шрифтом */
   }
   p {
    font-family: "Dsnote"; /* имя шрифта для тега P */
   }
  </style>
 </head>
 <body>
  <p>Текст шрифтом Dsnote.</p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS src.

Использование свойства CSS src

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и выше2.0 и 3.03.6 и выше9.2 и 9.610.0 и выше3.1 и выше
Поддержка:ЧастичноДаДаНетДаНетДаДа

Браузеры Internet Explorer до версии 9.0 игнорируют свойство src, если в нем присутствует format('формат шрифта'), а также понимают только шрифты формата EOT, который активно продвигается компаниями Microsoft и Adobe.