@font-face扒站的步驟

今天模仿百度首頁手機版的時候遇到的@font-face的問題，如今整理一下。

問題：圖中紅色區域，在拷貝F12樣式的時候，並無出現這些小圖標。

　　      

　　　　　　　圖1：百度的效果                       圖2：我作的效果

　　在審查元素的時候，發現這些地方不是圖片，只是字體。代碼以下：

.navs-news:before {
        content: "\e672";
        color: #777;
        font: 24px/1 icons;
    }

事實上,這個例子用到了@font-face的方法：@font-face是CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到你的網頁中，美化網頁。

具體的使用方法

@font-face {
      /*自定義的字體名稱*/
      font-family: <YourWebFontName>;
      /*source是自定義的字體的存放路徑  format是自定義的字體的格式，主要用來幫助瀏覽器識別*/
      src: <source> [<format>][,<source> [<format>]]*;
      /*字體是否爲粗體*/
      font-weight: <weight>;
      /*定義字體樣式*/
      font-style: <style>;
    }

我在這裏要說的是百度首頁的扒站過程當中我遇到的問題。

首先，我從此次模仿的做業中，瞭解到@font-face這個屬性，而後是如何從百度首頁上copy這個字體了。首先我切換到審查元素（chrome瀏覽器）-->手機模式-->刷新後，右鍵選擇：查看網頁源代碼。可是找不到@font-face這個樣式，換到360極速瀏覽器發現是能找到的。緣由就是：百度首頁的手機版網址是http://wap.baidu.com/，你須要訪問這個網址才能順利找到。

                        

　　　　　　　　　　　　　　　　　　　　　　 圖3：未找到font-face的網頁源代碼

　　　　　　 　　

　　　　　　　　　　　　　　　　　　　　　　 圖4：換個網址找到的@font-face的網頁源代碼

 

在網頁源代碼view-source:http://wap.baidu.com/中，CTRL+F搜索@font-face，能夠看到它的定義，拷貝到咱們本身的css文件中，刷新咱們製做的百度首頁。

@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
}

發現仍是沒有顯示。緣由是未聯網，因此要把這些字體文件（.eot，.woff等）下載到本地。下載方法：複製上面代碼裏面的url地址到瀏覽器，便可下載。如： http://m.baidu.com/static/index/iconfont/iconfont_f0abbec7.eot

而後把咱們下載下來的文件放在咱們的工程文件下，修改@font-face的url地址，即：

@font-face {
    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.ttf) format('truetype'), 
　　　　　url(../fonts/iconfont_f0abbec7.svg?#iconfont) format('svg');
　　font-weight: 400;
　　font-style: normal
}    

這時候，回到咱們最開始看到的代碼就能夠解釋了，如代碼裏的註釋：

.navs-news:before {
       /*字體圖標的編號*/
        content: "\e672";
       /*字體顏色*/
        color: #777;
       /*字體大小，以及font-family:icons和@font-face呼應*/
        font: 24px/1 icons;
    }

再刷新咱們的網頁，便可看到這些可愛的「小圖標」。

全部的字體文件最好都下載到本地，由於各個瀏覽器支持的字體不一致。好比.eot字體是IE專用字體，能夠從TrueType建立此格式字體,支持這種字體的瀏覽器有【IE4+】；.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】