Use @ font-face to load the Web font and @ font-faceweb font

Use @ font-face to load the Web font and @ font-faceweb font
 1. Introduction@ Font-face: it is used to customize the font style and obtain the font style from the server, so that the browser can display styles that do not exist on the client and bring a better display experience to users. @ Font-face is not a new feature of CSS3. It was written into the CSS2 specification as early as 98 years ago. It is currently supported in IE6.2. Syntax　　

@ Font-face {font-family: <FontName>; // Custom font name src: <source> [<format>] [, <source> [<format>] *; // font file path [font-weight: <weight>]; // whether to bold [font-style: <style>]; // whether it is italic}

 

Because different browsers support different formats of font files, we generally reference multiple formats of font files ( Eot \ woff \ ttf \ svg), Font-weight is used to set the font width, font-style is used to set whether it is italic. Tip: Generally we can easily get the font file in ttf format, you can use the http://www.fontsquirrel.com/tools/webfont-generator to convert ttf to other types of fonts. 3. Practical results:Demo download (the second effect font file is slightly larger) 4. Related MaterialsHttps://icomoon.io/use icons to make pictures http://www.fontsquirrel.com/tools/webfont-generator font conversion tools http://www.dafont.com/font library http://www.w3cplus.com/content/css3-font-face/ font-face details (very detailed, recommended) 5. @ font-face in BootstrapThe glyphicon component in Bootstrap2.x uses CSS Spirit to display small icons. In 3.x, @ font-face is used. The source code is as follows:

@ Font-face {// introduce the font file font-family: 'glyphicons Halflings '; src: url ('.. /fonts/glyphicons-halflings-regular.eot '); src: url ('.. /fonts/glyphicons-halflings-regular.eot? # Iefix') format ('embedded-opentype '), url ('.. /fonts/glyphicons-halflings-regular.woff2 ') format ('woff2'), url ('.. /fonts/glyphicons-halflings-regular.woff ') format ('woff'), url ('.. /fonts/glyphicons-halflings-regular.ttf ') format ('truetype'), url ('.. /fonts/glyphicons-halflings-regular.svg # glyphicons_halflingsregular ') format ('svg ');}. glyphicon {// basic style position: relative; top: 1px; display: inline-bl Ock; font-family: 'glyphicons Halflings '; font-style: normal; font-weight: normal; line-height: 1;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} // set the content of the small icon. glyphicon-cloud: before {content: "\ 2601 ";}. glyphicon-envelope: before {content: "\ 2709 ";}...... Total 200 + icon styles (see http://v3.bootcss.com/components/ for details)

 

It can be noted that content: "" is used here, and corresponding elements (generally span or ul) are added to the application. "Glyphicon -***"Class. If we do not use the features of the before pseudo element, how can we display small icons in common text? The characters in content are stored in Unicode Private Use Area (custom character Area) by default. If you want to Use them in HTML, add & # X,This principle is to convert it into an html object. The following two spans have the same display effect. <Span class =" Glyphicon-envelope"> </Span> <span class =" Glyphicon"> & # X2709</Span> OK, That's all.