CSS3 embedding fonts @font-face calling fonts

@font-face can load fonts from the server side, and the fonts used in all browsers are not restricted by local fonts. @font-face is really not a novelty, it was introduced in 2001, but has been widely supported by browsers for almost two years. and the font file format supported by each browser may be different, in general, the following four formats can cover all browsers.

EOT: This format is only used in older versions of IE

TTF: (Truetypefont) is a font file format co-launched by Apple and Microsoft, and with the popularity of Windows, it has become one of the most commonly used font file representations, supported by many browsers.

SVG: (Scalable Vector Graphics) This font may be the earliest supported on iOS devices and is not widely used in TTF format.

Woff: (Web Open font format) is a font format standard used by a Web page. This font format was developed in 2009 and is now being standardized by the world of the world, to become a unified standard for Web fonts.

How do I use a custom font?

The first step is to introduce a font into the CSS and give the name a proper name, as follows:

@font-face {/* Font-test*/font-family:tonjay;src:url (' Font/tonjay-web.woff '), url (' Font/tonjay-web.ttf '), url (' Font/tonjay-web.eot '); /* IE9 */}

Font-family defines the name of the font, and the next SRC is the location where the font file is loaded, all of which have multiple URLs because of browser compatibility issues.

The second step, using the font you just defined, is as follows:

div {Font-family:tonjay;}

Browser font compatibility with @font-face

Webkit/safari (3.2+): Truetype/opentype TT (. ttf), OpenType PS (. OTF);

Opera (+): Truetype/opentype TT (. ttf), OpenType PS (. OTf), SVG (. svg);

Internet Explorer: Supports font files in EOT format since IE4, IE9 supports woff;

Firefox (3.5+): Truetype/opentype TT (. ttf), OpenType PS (. OTf), WOFF (since Firefox 3.6)

Google Chrome:truetype/opentype TT (. ttf), OpenType PS (. OTf), WOFF since version 6

It can be concluded from the above:. EoT +. TTF/.OTF + svg + Woff = Perfect support for all browsers.

CSS3 embedding fonts @font-face calling fonts