把vux中的@font-face爲base64格式的字體信息解碼成可用的字體文件

在最近移動端項目中用到了vux，感受用着還習慣，當把vux使用到PC端的時候出現了IE瀏覽器出現，這樣的錯誤信息：

CSS3114: @font-face 未能完成 OpenType 嵌入權限檢查。權限必須是可安裝的。

文件: UwCtGsNCf5NCQ0N....

而後在IE瀏覽器頁面中的字體圖標就沒有顯示。

原來在vux中weiui_font.less文件中，以下寫法：

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: "weui";
    src: url('data:application/octet-stream;base64,AAE...省略') format('truetype');
}

因而想到了把base64格式字體轉換爲可用的字體文件。

實現步驟：

• 1. 獲取到base64字符串並刪除頭部信息，在這裏就是data:font/opentype;base64, 逗號也要刪除，這樣就獲取到了字體信息。 好比：T1RUTwAJAIAAAwAQQ0ZGIBcEq......過長不展現 。
• 2. 訪問http://www.motobit.com/util/base64-decoder-encoder.asp 這個網站，將純字體信息字符串粘貼進編輯區域，而後下方解碼選項選擇解碼base64字符串 和導出爲二進制文件，即：

• 3. 點擊轉換數據，這樣就下載下來一個base64.bin的二進制文件，而後把base64.bin直接更名爲weui.ttf（固然可用隨便改其它格式）;
• 4.而後打開地址https://everythingfonts.com/font-face，而後把weui.ttf格式上傳，最後下載到本地，獲得多種格式的字體文件（eot,ttf,woff,woff2,svg）。詳細轉化字體可參考地址：《CSS網頁中導入特殊字體@font-face屬性詳解》。
• 5.最後在本身的樣式表中添加以下樣式就能夠在IE瀏覽器中顯示該字體圖標了。

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: "weui";
        src: url('../fonts/weiui.eot'); /* IE9 Compat Modes */
    src: url('../fonts/weiui.woff') format('woff'), /* Modern Browsers */
    url('../fonts/weiui.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/weiui.svg#weiui') format('svg'); /* Legacy iOS */
}

參考地址：

• 將base64格式的字體信息解碼成可用的字體文件
• How to decode base64-encoded font information?