How does CSS refer to external ttf fonts?

In CSS, you can use the font-face attribute to refer to external fonts. The font-face attribute can realize the call of any external special font, for example: . ttf font.

In the new font-face rule, you must first define the name of the font (such as myFirstFont), and then point to the font file.

To use a font for an HTML element, please refer to the name of the font (myFirstFont) through the font-family attribute.

The font-face attribute refers to a ttf font example:

Example 1:

Example 1:

@font-face
 {
 font-family: myFirstFont;
 src: url('aa.ttf'),
      url('aa.eot'); /* IE9+ */
 font-weight: bold;
 }

Browser support for the font-face attribute:

Firefox, Chrome, Safari and Opera support .ttf (True Type Fonts ) and .otf (OpenType Fonts) type fonts.

Internet Explorer 9+ supports the new font-face rules, but only for fonts of type .eot (Embedded OpenType).

The above is how CSS references external ttf fonts? For more details, please pay attention to other related articles on 1024programmer.com!