Google Font字體本地化使用提升網站訪問速度

Google Web font在國內常常不穩定，速度在國內延遲也很高，而引起網頁打開速度慢。

1、常見的字體格式介紹

    不一樣的瀏覽器對字體格式支持是不一致的，常見的以下：

    一、TureTpe(.ttf)：

    .ttf字體是Windows和Mac的最多見的字體，是一種RAW格式，所以他不爲網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

    二、OpenType(.otf)： 

    .otf字體被認爲是一種原始的字體格式，其內置在TureType的基礎上，因此也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

    三、Web Open Font Format(.woff)：

    .woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

    四、Embedded Open Type(.eot)：

    .eot字體是IE專用字體，能夠從TrueType建立此格式字體,支持這種字體的瀏覽器有【IE4+】；

    五、SVG(.svg)格式：

    .svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有:
    【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

    因此，若是不考慮手機上的字體兼容，實際上只須要2種格式就好.

    （1）eot ：用於兼容IE瀏覽器的字體格式
    （2）woff ：其餘非IE瀏覽器都已經兼容的字體格式

 

2、獲取你所須要的google font的各種型字體格式

    通常來講，google font 只提供了字體的TTF格式，將你喜歡的google font的字體TTF下載下來。網上轉換的工具不少，咱們只要將TTF轉換爲上述的其餘幾種格式，好比eot，woff便可。

    http://www.fontsquirrel.com/fontface/generator在線轉換它能夠一次性的生成eot,woff.svg,ttf多種字體格式，並且還帶有相應的CSS和HTML預覽，很是方便。    

    轉換完成後，將相關的字體上傳到你的網站服務器，接下來，咱們用@font-face的語法來調用他就能夠了。

 

3、在你的CSS中使用@font-face，本地化使用google font。

基本語法網上說明不少，很少介紹了。來個實際例子：

@font-face {
    font-family: 'open_sansregular';
    src: url('opensans.eot');
    src: url('opensans.eot?#iefix') format('embedded-opentype'),
         url('opensans.woff2') format('woff2'),
         url('opensans.woff') format('woff'),
         url('opensans.ttf') format('truetype'),
         url('opensans.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

    在這裏，經過@font-face，我自定義了一個名爲的Tangerine-b字體，相關的eot,woff,ttf,svg字體格式上傳在/font/目錄下面。這裏使用的是相對路徑，固然你也可使用絕對路徑。

    離最後效果只差一步了，就是把本身定義的字體應用到你的Web中的DOM元素上，好比：

body { font-family: 'open_sansregular' }