由於英文字母只有26個,所以生成.eot、.woff、.ttf、.svg等文件是比較小的,也就十幾KB而已。但是對於漢字來說,常用的漢字就已經2500個了,生成的文件一般要2-3MB,如此龐大的包對頁面的載入時非常不利的,因此網路上那些@font-face格式轉換網站一般都不支持中文字體格式的轉換, ...
由於英文字母只有26個,所以生成.eot、.woff、.ttf、.svg等文件是比較小的,也就十幾KB而已。但是對於漢字來說,常用的漢字就已經2500個了,生成的文件一般要2-3MB,如此龐大的包對頁面的載入時非常不利的,因此網路上那些@font-face格式轉換網站一般都不支持中文字體格式的轉換,比如字客網<https://www.fontke.com/tool/fontface/>、線上字體轉換工具<http://www.sfont.cn/tools/font>等等,這些網站上面看似可以轉換@font-face,但其實都是欺騙感情的,太大的文件上傳不了到這個網站,或者是轉化出來的文件根本就沒有效果。
既然中文字體很難轉換,那麼還有什麼方法可以解決這個問題嗎?答案是有的。
既然2500個字太多了,那麼我們為什麼一定要把這些字體全部都轉換了呢?我們轉換我們在界面顯示的時候需要的文字不就可以了嗎?生成一個字體庫,比如我需要在網頁以“思源黑體”的字體顯示“中文字體轉換”這幾個字,那麼我們就生成這幾個字的“思源黑體”字體庫,這樣就大大減小了字體包的大小了。
終於,在我的不辭辛勞之下,確認過眼神,終於發現一個網站"有字型檔",就是這麼做的。
進入網址查找自己需要的字體,如“思源黑體Regular”
點擊免費使用
點擊CSS模式
輸入文字,點擊生成之後,就可以看到轉換為“思源黑體Regular”的字了,同時我們還可以發現一個樣式表的地址。
選中這個地址然後訪問,我們可以看到一串@font-face{}代碼,這就是我們想要的。
@font-face { font-family: 'SiYuanRegular11ee5a9d511cc1a'; /*自定義字體名稱*/ src: url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.gif?r=74334960047'); src: url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.gif?r=74334960047?#iefix') format('embedded-opentype'),/*IE6-IE8*/ url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.png?r=74334960047') format('woff2'), url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.bmp?r=74334960047') format('woff'),/*現代所有瀏覽器*/ url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.jpg?r=74334960047') format('truetype');/*Safari、Android、iOS*/ font-weight: normal; font-style: normal; }
切記,需要在每個url裡面加上http:,不然請求肯定錯誤。
接下來就可以在需要的地方使用這種字體了!