Loading Web fonts with @font-face

1. Introduction@font-face is used to customize font styles, to obtain a font style from the server side, so that the browser can display a style effect that the client does not exist, giving the user a better presentation experience. @font-face is not a new feature of CSS3, as early as 98 was written in the CSS2 specification, which is currently supported in IE6. 2. Syntax 　　

@font-Face{    font-family: <FontName>;       // Custom font names    SRC: <source> [<format>][,<source> [<format>]]*;      // font file path    [Font-weight: <weight>];     // whether or not to add bold    [Font-style: <style>];     // whether Italic }

Because each browser has different formats for font file support, we generally refer to font files in multiple formats ( Eot\woff\ttf\svg), Font-weight is used to set the font weight, and Font-style is used to set whether it is italic. TIP: Generally our easy-to-get font files are in TTF format, and you can convert TTF to several other fonts via Http://www.fontsquirrel.com/tools/webfont-generator. 3. Practical Effect:Demo download (second effect font file slightly larger) 4. Related Informationhttps://icomoon.io/making pictures with icons Http://www.fontsquirrel.com/tools/webfont-generator font Conversion toolhttp://www.dafont.com/Font Library Http://www.w3cplus.com/content/css3-font-face/font-face Details (very detailed, recommended) @font-face in 5.Bootstrapbootstrap2.x in the Glyphicon component is the use of CSS spirit to achieve small icon display effect, to the 3.x instead of @font-face implementation, the source code is as follows:

@font-face {//Introducing Font Filesfont-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 {//base Styleposition:relative;  top:1px; Display:inline-Block; Font-family: ' Glyphicons halflings '; Font-Style:normal; Font-Weight:normal; Line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-Smoothing:grayscale;}//Small icon Content Settings. glyphicon-Cloud:before {content:"\2601";}. Glyphicon-Envelope:before {content:"\2709";} ...... Total+ icon Style (specifically, refer to http://v3.bootcss.com/components/)

It can be noted that this is set with the content: "", when applied to the corresponding element (typically span or UL) plus "Glyphicon glyphicon-***"Class can be. If you don't take advantage of the characteristics of before pseudo-elements, how do you show small icons on plain text? The characters in this content are stored in the Unicode Private use area (that is, the user-defined character region) by default, and if they are to be used in HTML, they need to be & #x,The principle is to convert it into an HTML entity.     The following two spans show the same effect. <span class= " Glyphicon Glyphicon-envelope"></span> <span class=" Glyphicon"> & #x2709</span> Ok,that ' All, welcome to The Spit Groove.

Loading Web fonts with @font-face