web字型圖示的使用
阿新 • • 發佈：2018-11-08
方法：
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>
效果：
