前言:
以前我一直用內置的默認字體給文字設置字體,直到一天UI妹紙給了我下面的字體
當時我是蒙蔽的,這個字體的效果如下
默認字體並無該字體,直接設置是沒有效果的,這時就需要用到自定義字體了
下面我來簡單介紹一下添加自定義字體的方法
添加自定義字體:
①:首先需要下載所需字體
推薦該下載字體網站:https://www.fontke.com/
②:把下載字體文件放入 font文件夾里(建議font文件夾與 css 和 image文件夾平級))
③:引入字體(可直接在html文件里用@font-face引入字體,如下圖,分別是字體名字和路徑)
這樣就可以直接給需要設置此字體的文字設置該字體了,如下圖
就當我以為完美解決時,一個問題浮出水面:英文和數字還好,但中文字體體積太大,一般都是好幾兆
比如我下載的這個字體就有4M多
對於PC端可能都還好,如果是移動端,對性能的影響無法想象
那怎么解決這個棘手的問題呢?答案是使用字體蜘蛛進行壓縮
可參考:
https://www.jianshu.com/p/976d95fb87a7 (我是參考該文章設置自定義字體的)
https://github.com/aui/font-spider/blob/master/README-ZH-CN.md (字體蜘蛛官網及github)