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

src

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

Тип свойства

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

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

Значения

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

  • local('имя шрифта') — конструкция local(), где в скобках указывается имя шрифта. Оно будет использовано браузером для поиска данного шрифта на компьютере пользователя. Имя можно брать в необязательные двойные (" ") или одинарные (' ') кавычки.
  • url('адрес файла') — конструкция url(), где в скобках указывается полный или относительный адрес файла со шрифтом. Сам адрес можно брать в двойные или одинарные кавычки.
  • format('формат шрифта') — конструкция format(), где в скобках указывается один или несколько (через запятую) форматов шрифта (см. таблицу ниже). Если браузер не поддерживает указанные форматы, то он не будет загружать шрифт. Каждый формат шрифта необходимо брать в двойные или одинарные кавычки.
  • inherit — наследует значение src от родительского элемента.

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

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

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

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

  1. Можно использовать одно из двух — либо local('имя шрифта'), либо url('адрес файла').
  2. Если используется url('адрес файла'), то затем (через пробел) можно установить конструкцию format('формат шрифта').
  3. Допускается указание нескольких шрифтов через запятую. Тогда, если браузер не найдет или не поддерживает первый шрифт, он перейдет к обработке второго и т.д.

Примеры свойства 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" "https://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.

CSS по алфавиту
CSS по назначению