@font the use of-face

Almost all browsers (including the oldest IE6) also support the use of network fonts @font-face:

@font-face{font-family:' Mywebfont ';src:url (' Webfont.eot ');/*IE9 Compat Modes*/src:url (' webfont.eot #iefix ') format (' Embedded-opentype '),/*IE6-IE8*/url (' webfont.woff ') format (' Woff '),/*Modern Browsers*/url (' webfont.ttf ') format (' TrueType '),/*Safari, Android, IOS*/url (' webfont.svg#svgfontname ') format (' SVG ');/*Legacy IOS*/}

But after entering the modern browser era, the font of the Woff format has been universally supported, and all that you may need to write:

{  font-family: ' Mywebfont ';   src:/**/       url (' myfont.ttf ') format (' TrueType ') /* */}

or only the Woff format is included:

{  font-family: ' Mywebfont ';   src:/**/}

Then, use it like this:

{  font-family: ' Mywebfont ';}

@font-face Basic Knowledge

@font-facebefore the network font technology, the browser display text on the Web page using the font can only be limited to the computer has been installed in several fonts. and the fonts installed on everyone's computer are personal. @font-facethe role is to download from the Web and use a custom font, so that the page display font does not depend on the user's operating system font environment.

The efficiency of network fonts (web font)

You should be aware that font files can be very large in size and require additional HTTP connections, which can slow down the loading of web pages. Therefore, before using the network font @font-face , you need to understand its pros and cons, to determine whether the network font is really necessary to use on your site page.

If you decide to use personalized custom fonts, there is a very flexible way to load only as few font characters and as few font styles as possible (bold/italic). For example, if you use Google Fonts, you can only load the specified font style combination:

@import URL (http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);

Or specify the font that loads those characters.

Network font (web font) file format

At present, the main network fonts (Web font) format includes Woff,svg,eot,otf/ttf.

WOFF

Woff is the first letter of the Web Open Font format for several words. This font format is dedicated to the web and is developed jointly by Mozilla and several other major organizations. Woff fonts are typically loaded faster than other fonts because of the storage structure and compression algorithms used in OpenType (OTF) and TrueType (TTF) fonts. This font format can also include meta-information and authorization information. This font format has a trend in the world of landing, as all modern browsers are beginning to support this font format.

Svg/svgz

Scalable Vector Graphics (Font). SVG is an improved font format in vector format that is smaller than vector images and is suitable for use on mobile devices. Only the previous version of Safari (4.1) on the iphone supports it. At present, Firefox and IE do not support SVG font format. Firefox postponed support for SVG fonts, with a focus on the Woff format. Svgz is a compressed version of SVG.

EOT

Embedded Open Type. This is the font format created by Microsoft (Microsoft invented the Web font @font-face 15 years ago). This format is only used in IE6/IE8.

Otf/ttf

OpenType font and TrueType font. Partly because this format is easy to copy (illegal), this only spawned the Woff font format. However, OpenType has many unique places and is loved by many designers.

@font the use of-face