• <menu id="gkyoy"></menu>
  • <menu id="gkyoy"></menu>
    有圖網 > 幫助中心

    有圖H5 中文webfont“按需加載”啦!

    有圖 “按需加載” 字體方案上線!
    內容梗概

    對于有圖的專業級H5用戶來說,會經常要使用到常規中文字體之外的藝術和書法字體,之前有圖支持本地字體(類似黑體的字型),而本地字體則是采用將文字生成圖片的形式嵌入到Html5網頁中,優點是所見即所得,缺點是圖片文件偏大,導致終端用戶訪問H5可能加載稍慢,同時發布的過程處理時間稍長,最關鍵的是文字的閱讀體驗較差,細致的人會發現藝術字體其實字體邊緣是不夠清晰的,特別是字號過大或過小的時候比較明顯,同時也為有圖平臺帶來巨大的流量成本,因為有圖的H5付費作品平臺是不按流量收費的,本次開發也就這么一點點小私心了,你懂的!

      由于中文字體文件過大,一般都在8M左右,為了徹底解決這一問題,有圖采用”按需加載”(根據頁面內容把字體中不需要的字型刪除掉)的方案,將中文字體壓縮成和英文字體一樣小巧玲瓏。

        “按需加載”優點如下:

    (1)“按需截取”生成的中文字體只有十幾K至一百多K,而“整套嵌入”的中文字體一般3M至十幾M,因此頁面響應速度上“按需截取”狂甩“整套嵌入”好幾條街。

    (2)“按需截取”是每一張頁面都配有專屬的字體文件(字體子集),即每打開一張頁面就會加載與之對應的字體文件,而"整套嵌入“則是一次加載,整站通用。

      下面詳細的介紹下什么叫在線字體:在線字體(web font)

    在線字體又叫web font或網絡字體,是CSS3中的一個模塊,主要是把自定義的特殊字體嵌入到網頁中。免安裝、免下載、直接在線使用。由于設計的需要,網站中難免會用到一些比較特殊的字體來裝飾我們的網站,讓其更加美觀,我們可以用CSS的font-family屬性來設置文本字體。然而設置的字體如果是用戶的電腦上沒有安裝的字體,那么對不起,文字將以宋體呈現,這大大的影響了用戶體驗。

      我們經常能看到國外的一些網站使用了非常漂亮的字體,而這些字體通常在用戶的電腦中是沒有安裝的,如何實現的?如何讓特殊字體在網頁客戶端顯示?

    目前方案有兩種:

    制作圖片嵌入網頁;引用在線字體。

    第一種方案:生成圖片是現在主流的中文字體解決方案,但是有很大的缺陷,維護麻煩、不利于SEO!詳見圖片的弊端

    第二種方案:在線字體是一種創新的解決方案,在國外已經相當流行,包括Google fonts、Adobe typekit等知名服務商。

    通過上傳字體文件到指定目錄,然后在CSS中用規定格式進行引用就可以使字體效果躍上你的頁面了,使網頁用字不再受客戶端影響。

    因為中文字體過于龐大,小則三五兆,大則十幾兆,所以在線字體只流行于英文網站,雖然中文網頁設計師望眼欲穿,但也無可奈何。臨淵羨魚,不如退而結網,而現在我們通過按需加載的方式生成小字庫,可以小到幾十K,甚至幾K,終于有效控制了字體文件的大小,使中文也加入了網絡字體的陣營。

    國內主流瀏覽器都支持,比如:IE、360、搜狗、火狐、chrome、safari、Opera。


    最后強調下:

    有圖H5打開文件后,選中文字塊,在字體樣式有個像格式刷的按鈕,用這個按鈕來切換你的字體狀態,在線字體or本地字體,在線字體采用H5頁面按需加載,本地字體采用生成圖片嵌入H5。親,可以馬上去體驗下流比清爽的中文字了。

     

     

    BTW:

    近期有圖H5升級亮點:

    1,增加延軌跡運動的動畫,用戶可以像PPT一樣自己任意劃曲線或直線,對象就可以沿著您劃的軌跡運動了,這是一個很實用的功能。

    2,取消對象的動畫的數量限制,原先是3個,現在是無限,當然十種八種就夠了,總之,我們放開了,開放啦!

    3,增加在線字體和本地字體的選項,讓在線字體的種類更豐富,你懂得,技術小哥們的辛勤努力希望能得到您的分享和贊,先謝謝啦!

    4,觸發器已經運行多日了,沒注意到的趕緊試試吧。

    接下來,我們還要奮斗把有圖H5打造成最牛最牛的H5工具,沒有之一,這是我們的短期目標,接下來大家還想要什么功能,比如3D全景,比如時間軸,比如xxxx,總之您有好的想法和建議,請留言哦!

     

    天堂www中文在线,邪恶道大全日本全彩H,中文字幕 制服丝袜 无码视频
  • <menu id="gkyoy"></menu>
  • <menu id="gkyoy"></menu>