1. 程式人生 > >web字型圖示的使用

web字型圖示的使用

方法:

1.在icomoon字型檔網站上下載完了字型之後,將壓縮包解壓

2.將壓縮包中的font資料夾,拷貝到所需使用的樣式表文件同路徑下(下面引用的時候,沒有加../到上級目錄)

   就是@font-face的url地址要注意,他的作用就是找到匯入的font資料夾

3.將壓縮包中的css檔案內容部分拷貝到自己的樣式表中(看原始碼)

4通過font-family:"icomoon"引用,開啟壓縮包的html檔案將圖示右下角矩形選中,ctrl+c複製在引用時貼上

5.通過壓縮包裡面的json格式的檔案,可以追加字型檔案

檔案的路徑:

 

html格式檔案:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?4mm4qn');
  src:  url('fonts/icomoon.eot?4mm4qn#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?4mm4qn') format('truetype'),
    url('fonts/icomoon.woff?4mm4qn') format('woff'),
    url('fonts/icomoon.svg?4mm4qn#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* 這裡注意url地址前面沒有加../這種到上級目錄,如果引用不成功很可能是這裡出錯。*/
    
    span,em,i{
    	font-family: "icomoon";
    	font-size: 100px;
        font-style: normal;
        color: #CB2A0F; 
        /*有些瀏覽器可能上面字型傾斜樣式不起作用,還是需要預設新增*/
    }
	</style>
    
</head>
<body>
	<span></span>
	<em></em>
	<i></i>
	<!-- 通過壓縮包裡面的html開啟,對應的圖形下面右邊小矩形ctrl+c快捷鍵複製,這裡貼上 -->
</body>
</html>

效果: