中文字體@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:，否則請求確定錯誤。
接下來就能夠在須要的地方使用這種字體了！