在網頁中使用特殊中文字體成為可能
阿新 • • 發佈:2018-05-14
embed 安裝 embedded form log cnblogs 上下 顯示 設計
轉載 http://www.cnblogs.com/Kummy/p/4442142.html
??以前還不知道這種辦法的時候,如果要在網頁中顯示特殊中文字體的話,需要導入整個全部的.ttf字體文件,而文件高達好幾兆,根本是不可取的,偶然間看到以上鏈接的文章,新的思路新的方法,將網頁中需要用特殊字體的中文文字,進行打包壓縮。
1.安裝font-spider
npm install font-spider -g
2.在css中使用webfont
@font-face{ font-family: ‘pinghei‘; src: url(‘../font/pinghei.eot‘); src: url(‘../font/pinghei.eot?#font-spider‘) format(‘embedded-opentype‘), url(‘../font/pinghei.woff‘) format(‘woff‘), url(‘../font/pinghei.ttf‘) format(‘truetype‘), url(‘../font/pinghei.svg‘) format(‘svg‘); font-weight: normal; font-style: normal; } // 指定字體並使用 .pinghei { font-family: ‘pinghei‘; } // ../font 都是相對路徑,看文件相對位置 // 其中.ttf文件是必須要有的,根據設計稿的字體在網上下載對應的.ttf文件,其他都是生成的
3.運行font-spider命令
font-spider *.html
4.溫馨提示
運行font-spider命令後,會自動生成相關文件,而其中的字體只包括只包括只包括頁面中出現並引用字體的文字,如果後面新增了其他文字,需要重新運行命令
在網頁中使用特殊中文字體成為可能