文: jack同學
jack同學
-
web字體： 為了解決用戶電腦上沒有安裝的字體
可以使用font-family設置字體顯示，需要用戶電腦本身就支持某個字體
-
第二種強制讓用戶下載該字體
準備一個字體文件（一般公司設計師會提供）媒殉，一般字體文件格式每個瀏覽器支持都不同，所以需要同一個字體的多個格式文件摘盆。（常見的字體格式有 .ttf / .otf / .eot / .woff / .woff2 / .svg
-
使用@font-face指令制作一個新字體
@font-face { font-family: "杰克體"; /*給新字體取名字*/ src: url("./../font/杰克體.ttf"), /*指定新字體的路徑*/ url("./../font/杰克體.eot"), url("./../font/杰克體.woff"), url("./../font/杰克體.svg"); } -
使用新字體
.icon { font-family: "杰克體" !important; } /* 當添加這個類名時坛梁，當前元素就使用了這個新字體了*/
- 當頁面加載這個css文件時，瀏覽器會臨時使用這個字體在這個頁面膘融，當頁面關閉字體失效
-
字體圖標
- 把需要的圖標制作成web字體文件芙粱，使用web字體加載的方式使用。
- 優(yōu)點：字體圖標數(shù)量可控氧映，文件較小春畔，效率更高，字體圖標可設置顏色岛都、大小律姨、粗細等且不會改變字體圖標的質(zhì)量，不會模糊臼疫，因為他們本身就是字體择份。
-
雪碧圖(精靈圖)
- 一些小的圖片合成為一張圖片加載到頁面，通過background-position定位圖片顯示
- 根據(jù)公司情況使用雪碧圖還是字體圖標
- 優(yōu)點：只加載一張圖片烫堤，減少文件大小荣赶，減少請求次數(shù)
-
常用字體圖標庫網(wǎng)站
- 阿里巴巴字體圖標庫https://www.iconfont.cn/
