seodon.ru — CSS свойство src

Css what is 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: 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

       
Текст шрифтом Dsnote.
  

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

Версии CSS

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox		Opera		Safari
Версия:	До 9.0	9.0 и выше	2.0 и выше	2.0 и 3.0	3.6 и выше	9.2 и 9.6	10.0 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Нет	Да	Нет	Да	Да

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

Источник

HTML src Attribute

The src attribute specifies the location (URL) of the external resource.

Applies to

The src attribute can be used on the following elements:

Examples

Audio Example

Embed Example

An embedded flash animation:

Iframe Example

Img Example

An image is marked up as follows:

Input Example

An HTML form with an image that represents the submit button:

Script Example

Point to an external JavaScript file:

Source Example

An audio player with two source files. The browser should choose which file (if any) it has support for:

Track Example

A video with two subtitle tracks:

Video Example

Browser Support

The src attribute has the following browser support for each element:

Element
audio	4.0	9.0	3.5	4.0	10.5
embed	Yes	Yes	Yes	Yes	Yes
iframe	Yes	Yes	Yes	Yes	Yes
img	Yes	Yes	Yes	Yes	Yes
input	1.0	2.0	1.0	1.0	1.0
script	Yes	Yes	Yes	Yes	Yes
source	4.0	9.0	3.5	4.0	10.5
track	18.0	10.0	31.0	6.0	15.0
video	4.0	9.0	3.5	4.0	10.5

Источник

HTML Tag

The tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The tag has two required attributes:

• src — Specifies the path to the image
• alt — Specifies an alternate text for the image, if the image for some reason cannot be displayed

Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Tip: To link an image to another document, simply nest the tag inside an tag (see example below).

Browser Support

Attributes

Attribute	Value	Description
alt	text	Specifies an alternate text for an image
crossorigin	anonymous use-credentials	Allow images from third-party sites that allow cross-origin access to be used with canvas
height	pixels	Specifies the height of an image
ismap	ismap	Specifies an image as a server-side image map
loading	eager lazy	Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdesc	URL	Specifies a URL to a detailed description of an image
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies which referrer information to use when fetching an image
sizes	sizes	Specifies image sizes for different page layouts
src	URL	Specifies the path to the image
srcset	URL-list	Specifies a list of image files to use in different situations
usemap	#mapname	Specifies an image as a client-side image map
width	pixels	Specifies the width of an image

Источник