CSS怎么在項目里引入自定義字體(@font-face)


 

  前言:

    以前我一直用內置的默認字體給文字設置字體,直到一天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)

          

               

     

   

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM