天天看點

字型圖示固用代碼

在一些大型的項目中,類似“微金所”等,在首頁通常需要有一些屬于自己的字型圖示,這時需要在項目中建立fonts檔案夾,放入幾個必須的檔案,如下圖:

字型圖示固用代碼

想要下載下傳fonts檔案,點選字型圖示檔案fonts下載下傳哦,取貨碼:uh3l。

将上面下載下傳的fonts檔案夾放在項目目錄中,想要用到這個還需要在相應的樣式檔案中寫入以下代碼:

/*1 通過@font-face定義自己的字型*/
@font-face {
    /*2 申明自己的字型名稱 */
    font-family: 'wjs';
    /*3 引入字型檔案(限制某一段字元代表什麼圖案)*/
    src:
        url(../fonts/MiFie-Web-Font.eot) format('embedded-opentype'),
        url(../fonts/MiFie-Web-Font.ttf) format('truetype'),
        url(../fonts/MiFie-Web-Font.woff) format('woff'),
        url(../fonts/MiFie-Web-Font.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
/*4 怎麼使用維護性更好*/
.wjs_icon{
    font-family: wjs;
}
/*給每個圖示專門設定一個類content是代表圖示的字元,這個由UI組提前設定好的*/
.wjs_icon_phone::before{
    content: '\e908';
}