有兩種方法,一種簡單的,一種比較復雜,都可以實現(注:這里的方法只適合使用少量的中文字體,如果使用的字量過大,請使用其他方法解決)
第一種:簡單的
1.下載需要的中文字體的.ttf格式,這個都不難找到,百度上一搜一大片,都可以下載到。
2.下載fontforge軟件,這個軟件可以編輯字體,字體文件內存一般都比較大,直接使用會導致網速加載速度變慢,使用這個字體編輯軟件的目的就是將需要的字體提取出來,可以解決字體內存變小,從而不影響加載速度。
3.打開AI,寫一個自己需要的文字,如圖,我這里使用的方正姚體,將寫好的字體轉化成輪廓(在字體上單機右鍵—>創建輪廓),然后將文字保存成.svg格式。
4.打開下載好的fontforge軟件,新建一個新的空白字體文件,查看過@font-face引用字體源文件的同學應該知道,字體或者icon在代碼中引用都是用符號代替的,也就是這邊字體符號,新建的字體文件中建議從A開始做字體,這樣方便后期代碼中書寫,雙擊A下面的框,彈出一個字體編輯窗口,點擊File—>Import,導入剛才用AI保存的.svg格式文件,導入字體。(注:選擇導入字體類型)
導入字體成功
如上方法將需要的字體全部導入后保存成.ttf格式(點擊File—>Generate Fonts)。(注:1.這里要保存成.ttf格式,如下圖;2.編輯好的字體建議截圖保存,方便后期文字修改查找所對應的字符)
編輯字體的工作到這里就結束了。
5.使用fontsquirrel在線轉換軟件將.ttf格式轉換成需要的格式.eot .woff .svg .ttf等頁面中所需要的格式。(注:fontsquirrel在線轉換軟件網址:http://www.fontsquirrel.com/tools/webfont-generator),轉換完成保存壓縮包到需要的文件下,這里文件包會自動生成一個stylesheet.css文件,文件中已經將字體引用好了,直接使用即可。
第二種:復雜的
1.將下載好的.ttf文件用fontforge字體編輯軟件打開,在fontforge中新建一個空白字體文件,將打開的.ttf中所需要的文字雙擊打開編輯窗口,點擊File—>Export將字體導出成.svg格式。在空白字體文件中,雙擊A下面的框,彈出字體編輯窗口,點擊File—>Import將字體導入的文件中,在這里尋找自己需要的文字可能會費大量的時間。(注:這里不能從.ttf文件中直接拷貝字體到新建空白字體文件中,這樣字體會變小,建議先導出,再導入)。
2.如上方法,將需要的字體重新編排在新建的文件中再保存成.ttf格式,會使字體文件的內存變小,方便使用。
3..ttf字體文件轉換其他格式的方法請查看第一種方法步驟5。
兩種方法都可以實現中文字體轉換,使用@font-face方法和英文字體引用方式一樣。