開源字體包縮減font-spider


  最近公司產品用微軟雅黑,被告~  領導要求產品后台系統必須更換字體,美工給了個宋體,個人覺得太丑,就網上搜了些處理方法使用

  CSS屬性 @font-face 自定義字體, 最后決定用 思源黑體 (思源黑體是AdobeGoogle宣布推出的一款開源字體,詳細內容自行百度,.ttf文件font-spider 的github上有提供下載地址)。

  思源黑體中文字體包竟然有10幾M 頁面加載速度太慢,所以就百度解決方案,搜到了字蛛 font-spider ,很好用的一款開源工具。

  給個友情鏈接: http://font-spider.org/   網站和 github上有使用方法和代碼。

 

記錄下自己的使用過程以便以后回憶:

   1: 安裝 node.js; (我自己機器本身就安裝過,之前有簡單的玩過node)

    2:npm install font-spider -g    PS: 本機是Win7, 也有可能本機環境問題,需要安裝一個font依賴包 以及python(記得配置環境變量).

    3:  接下來根據網站的步驟的本地新建css文件、html文件 ,而我們系統是jsp文件 需要轉,正好 我們系統做過國際化,所有系統所需要的文字 全部在資源文件當中,然后新建一個html文件 將

資源文件中所有的漢字全部拷貝進去,哈哈 就是這么省事。

    4: 最后命令行 運行 font-spider test.html ,  大功告成, 字體文件只有100多KB,作為后台管理系統完全可以了。

   

   

上一下最后成功的圖片,哈哈OK了,結束。

 

PS: 不過只是自己玩了玩,最后還是沒用到系統里,我覺得如果靜態頁面用還是很不錯的,但是因為系統后台有很多新增數據,很多字體肯定沒打包到里面的,到時候會有部分字體顯示不同,有點尷尬,但是我覺得慢慢更新字體包也何嘗不可,多改幾次BUG,很快就豐富了,個人理解。

不過以后做靜態網站什么的還是用的到的,寫個博客做個記錄,以便以后回憶。

     

 


免責聲明!

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



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