在一些大型的項目中,類似“微金所”等,在首頁通常需要有一些屬于自己的字型圖示,這時需要在項目中建立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';
}