1. <dfn id="m3xrw"></dfn>

      <track id="m3xrw"></track>
      <video id="m3xrw"></video>

      <acronym id="m3xrw"></acronym>
    2. <wbr id="m3xrw"><code id="m3xrw"><span id="m3xrw"></span></code></wbr>
      <var id="m3xrw"></var>

        <acronym id="m3xrw"></acronym>
      <var id="m3xrw"></var><acronym id="m3xrw"><thead id="m3xrw"></thead></acronym>
    3. <u id="m3xrw"></u>
      <track id="m3xrw"><ins id="m3xrw"></ins></track>
      1. 技術資訊

        在網頁中使用特殊字體的幾種方式 .

        TIME:2014/1/9

        方式1: Google Font API

         

        因為IE目前只支持 eot 字體(Embed OpenType), 而TTF字體被Firefox / Opera / Chrome / Safari支持。 Google Font API 實際上是通過判斷瀏覽器類型來返回相應的類型字體, 通過CCS3的 @font-face 來達到嵌入效果。Google Font API具體的用法參見這里:http://code.google.com/apis/webfonts/docs/getting_started.html

         

        目前Google Font API支持的字體非常有限,列表在此 http://code.google.com/webfonts

         

        如果字體無法在此列表中找到,你可以用相同的原理來實現

        1. 首先找到此字體的ttf文件

        2. 在 http://www.kirsle.net/wizards/ttf2eot.cgi 轉換成 eot文件

        3. 在你的CSS中分別引入eot 和 ttf

         

        1. @font-face {    
        2.   font-family: 字體名稱;    
        3.   src: url( 字體.eot ); /* IE */  
        4.   src: url( 字體.ttf ) format("truetype");  /* 非IE */  
        5. }    
        6.    
        7. /* 你就可以直接使用此字體了 */    
        8. html, body { font-family: 字體名稱, verdana, helvetica, sans-serif;  }    

         

        這種方式目前兼容 IE6/7/8 , Opera 10+, Firefox 3.5+, Google Chrome 4.0+, Safari

         

        優點:適合SEO 適合英文字體 靈活

        缺點:中文字體動輒幾M,以目前的網絡環境還不實用

         

         


         

        方式2: Flash替換法

         

        Flash的flash.text.TextField 是支持內嵌字體的。這種方式比較有名的是 http://www.mikeindustries.com/blog/sifr

        通過Javascript搜索頁面上特定的HTML標記,(比如<h1>),將文字元素替換成 Flash,并設置指定字體

         

        優點:適合SEO, 任何支持Flash的瀏覽器都可兼容

        缺點:此Flash會根據字體內容的多少而動態調整Flash, 在UI設計上增加了很多難度。特別是對換行之類的處理。

                 內嵌一個支持中文的swf 一般要幾M, 以目前的網絡環境來說加載速度很慢

         

         


         

        方式3: 直接將文字做成圖片

         

        可以將頁面上特殊字體的部分做成圖片,不過這種方式不利于SEO,而且對于網站全球化非常麻煩

         

         


         

        方式4: 瀏覽器客戶端動態替換圖片

         

        通過Javascript搜索頁面上特定的HTML標記,(比如<h1>), 想服務器發送AJAX請求,動態地生成這段文字使用某種字體的圖片,最后客戶端JS將此HTML標記替換成 img.  此類的代表是 http://facelift.mawhorter.net/

         

        優點:適合SEO, 適合大字庫字體(如中文)

        缺點:對服務器壓力稍大

        上一篇

        應用程序試圖執行安全策略不允許的操作。

        下一篇

        揭秘微信營銷培訓騙局