What is the role of "src" and "url"?

Question

When rendering the following code, what is the role of the src property?

@font-face { font-family: "calibriforh1"; src: local("calibri"), url(calibri.woff); } h1 { font-family: "calibriforh1", arial, sans-serif; } 

Answer 1

The src property is used to determine where the font file is located. It can be defined as local and / or via a remote url . In this case, the definition indicates that the calibri font should be used if it is installed on the user's computer. If not, then you need to look for the calibri.woff file in the css folder. Check the MDN page for font

Answer 2

Information from and further information available from the links below

The load() method is font-face , which looks like this:

 interface FontFace { attribute DOMString family; attribute DOMString style; attribute DOMString weight; attribute DOMString stretch; attribute DOMString unicodeRange; attribute DOMString variant; attribute DOMString featureSettings; readonly attribute FontFaceLoadStatus status; Promise<FontFace> load(); readonly attribute Promise<FontFace> loaded; }; 

identifies src as a slot. The src descriptor is required for the @font-face rule to conform to the specification. The purpose of this is to determine the separation of resources, while the subsequent url value actually determines the location of the external resource that contains font files or glyphs.

In particular..

The internal [[Urls]] slot of the FontFace object is set to the value of the src descriptor @ font-face and reflects any changes made to the src descriptor.

► CSS Font Download Module Level 3 (s.2.3)

The load () method of FontFace uses Cetch-enabled fetch to read the font data specified in the font files. For fonts built from binary data or fonts that are already loading or loading, it does nothing.

When the render client reads the font code, iterates over the src links until it finds one that it can successfully execute. Subsequent values ​​are then not processed.

For simplicity, you can compare the ratio of src and url with the ratio of an array of key values.

The correct syntax for src is

 <url> [format(<string> #)]? | <font-face-name> ] # 

Further:

• CSS Level 3 Font Module
• CSS Font Download Module Level 3
• HTML5 dictionary, selection from CORS

Answer 3

It is for searching the user system for the "calibri" font, and if it does not exist, it will download the font from the server.