Steps to @font-face Grill Station

Today imitation Baidu Home phone version of the @font-face encountered when the problem, now tidy up a bit.

Problem: In the red area of the figure, these small icons do not appear when copying the F12 style.

Figure 1: The effect of Baidu Figure 2: I do the effect

When reviewing the elements, it is found that these places are not pictures, just fonts. The code is as follows:

{        content: "\e672";         color: #777;         font: 24px/1 icons;    }

In fact, this example uses the @font-face method: @font-face is a module in the CSS3, he mainly put his own definition of web fonts embedded in your Web page, beautify the page. specific ways to use

@font-face{/*Custom font names*/font-family:<YourWebFontName>;/*source is a custom font that holds the path format is a custom font formatting that is primarily used to help the browser identify*/src:<source> [<format>][,<source> [<format>]]*;/*whether the font is bold*/Font-weight:<weight>;/*Defining font Styles*/Font-style:<style>; }

I am here to say is Baidu home in the process of the grilled station I encountered problems. first of all, I learned from this imitation of the job, @font-face this property, and then how to copy the font from the Baidu home page. First I switch to the review element (Chrome browser)--Phone mode--Refresh, right-click: View Web page source code. But can not find @font-face this style, change to 360 Speed browser discovery is able to find. The reason is: Baidu homepage Mobile version of the website is http://wap.baidu.com/, you need to visit this site to find the smooth.                          　　　　　　　　　　　　　　　　　　　　　　 Figure 3: Page source code for Font-face not found Figure 4: @font-face Web page source code found on a different URLIn the Web page source code view-source:http://wap.baidu.com/, ctrl+f search @font-face, can see its definition, copy to our own CSS file, refresh our production Baidu home page.

  @font-face  { font-family : icons ;  src : url (//m.baidu.com/static/index/iconfont /ICONFONT_F0ABBEC7.EOT) ;  src : url (//m.baidu.com/static/index/iconfont /iconfont_f0abbec7.eot#iefix) format (' Embedded-opentype '), url (//m.baidu.com/static/index/iconfont/iconfont_    　　F0abbec7.woff) format (' Woff '), url (//m.baidu.com/static/index/iconfont/iconfont_f0abbec7.ttf) format (' TrueType '), URL (//m.baidu.com/static/index/iconfont/iconfont_f0abbec7.svg #iconfont) format (' SVG ') ;  Font-weight : 400 ;  Font-style : normal } 

The discovery is still not displayed. The reason is that they are not networked, so download these font files (. Eot,.woff, etc.) to local. Download method: Copy the above code inside the URL address to the browser, you can download. such as: Http://m.baidu.com/static/index/iconfont/iconfont_f0abbec7.eot and then put the files we downloaded under our project file, modify the @font-face URL address, namely:

{    font-family: icons;     src: url (.. /FONTS/ICONFONT_F0ABBEC7.EOT);     src: url (.. /fonts/iconfont_f0abbec7.eot#iefix) format (' Embedded-opentype '),          url (.. /fonts/iconfont_f0abbec7.woff) format (' Woff '),         

URL (.. /fonts/iconfont_f0abbec7.svg? #iconfont) format (' SVG '); font-weight: ; font-style: normal}    

At this point, back to the code we saw at the very beginning, we can explain it, like the comments in the code:

{       /* font icon number */        content: "\e672";       /* Font Color */         color: #777;       /* font size, as well as font-family:icons and @font-face echoes */         font: 24px/1 icons;    }

Then refresh our page to see these cute "little icons".

All font files are best downloaded locally, because the fonts supported by each browser are inconsistent. For example, the. EoT font is an IE-specific font that can be created from TrueType fonts, and browsers that support this font have "ie4+"; SVG fonts are a format based on SVG font rendering, and browsers that support this font have "chrome4+,safari3.1+, Opera10.0+,ios Mobile safari3.2+ "

Steps to @font-face Grill Station