The font-family attribute of CSS enables webpages to use fonts on customers' computers to obtain colorful WEB pages. But what if the client does not have the font you want? We cannot always have every visitor install a font, right? In fact, this is acceptable! However, website developers help visitors download and install the files instead of manually downloading the files. For more information, see the font file format. There are several main types of font formats: TrueType, Embedded Open Type, OpenType, WOFF, and SVG. TrueType is the most common font format for Windows and Mac systems. Its biggest feature is that it is a contour-based font defined by a mathematical model, this makes them easier to process than vector-based fonts, ensuring the consistency between the screen and the print output. At the same time, these fonts can be scaled and rotated at will, just like the Vector Fonts, without having to worry about the appearance of serrations. EOT-Embedded Open Type (. eot) EOT is an Embedded font and is developed by Microsoft. The OpenType font can be embedded into a web page with @ font-face and downloaded to the browser for rendering. It is stored in the temporary installation folder. OpenType (. otf) OpenType is a font jointly developed by Microsoft and Adobe. All Microsoft IE browsers use this font. It is designed to replace TrueType fonts. WOFF-Web Open Font Format (. woff) WOFF (Web development font format) is a specialized font format standard designed for the Web. It is actually an encapsulation of TrueType/OpenType and other font formats, each font file contains the font and Metadata (Metadata) for the font. The font file is compressed for network transmission. SVG (Scalable Vector Graphics) Fonts (. svg) SVG is an open standard Graphics format developed by W3C. The SVG font uses the SVG technology to present the font. There is also a gzip compression format SVG font. In CSS3, A @ face-face attribute is added. With this attribute, we can load the font files on the server and place them in the temporary installation folder of the client. The usage is as follows: @ font-face {font-family: "FontAwesome"; font-style: normal; font-weight: normal; src: url ("fontawesome-webfont.eot? # Iefix ") format (" eot "), url (" fontawesome-webfont.woff ") format (" woff "), url (" fontawesome-webfont.ttf ") format (" truetype "), url ("fontawesome-webfont.svg # FontAwesome") format ("svg ");}