收到了SegmentFault的一封私信:https://segmentfault.com/annual-report-2016#/start
好奇檢查了一下這是什么字體:
。。好吧我確定沒有這個字體,那就是自定義的字體了。
檢查了HTTP請求,有這么一個請求:
雖然請求的都是字體文件但是第一個明顯更清新脫俗一些,他是base64編碼的,data:font/opentype;base64,T1RUTwAJAIAAAwAQQ0ZGIBcEq......過長不展示
查了一下如何將其轉為可用的字體文件:
參考:http://stackoverflow.com/questions/6920832/how-to-decode-base64-encoded-font-information/20184975#20184975
好吧 我再復述一下過程: 1. 獲取到base64字符串并刪除頭部信息,在這里就是data:font/opentype;base64,
逗號也要刪除,這樣就獲取到了字體信息。 比如:T1RUTwAJAIAAAwAQQ0ZGIBcEq......過長不展示
。 2. 訪問http://www.motobit.com/util/base64-decoder-encoder.asp 這個網站,將純字體信息字符串粘貼進編輯區域,然后下方解碼選項選擇解碼base64字符串 和導出為二進制文件,即: 3. 點擊轉換數據,這樣就下載下來一個base64.bin的二進制文件,然后用編輯工具打開,在前面會發現一些字體格式的關鍵字,比如ttf,woff,otf…我的關鍵字是這樣的:
我就默認設置為otf格式的了。。 4.然后將base64.bin 問價改名為 pixelEn.otf, 文件名隨意。
到此完成,我們可以試試字體效果怎么樣,建議一個html文件:
<!DOCTYPE html><html><head> <title></title> <style type="text/CSS"> @font-face { font-family: "pixelEn"; src: url("pixelEn.otf"); } p { font-family: "pixelEn"; font-size: 24px; } </style></head><body> <p>This is pixelEn.otf</p></body></html>效果:
這個網站請求了2個字體文件,我們使用的是英文字符的”像素化”字體,上圖中第二個就是中文”像素化”的字體文件,有興趣可以下載下來使用。
注意:中文字符應用了pixelEn會出現亂碼現象,所以應該針對不同的字符應用相應的字體。
新聞熱點
疑難解答