Google Font字型本地化使用提高網站訪問速度

標籤：

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

一、常見的字型格式介紹

    不同的瀏覽器對字型格式支援是不一致的，常見的如下：

    1、TureTpe(.ttf)：

    .ttf字型是Windows和Mac的最常見的字型，是一種RAW格式，因此他不為網站最佳化,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

    2、OpenType(.otf)： 

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

    3、Web Open Font Format(.woff)：

    .woff字型是Web字型中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支援中繼資料套件的分離,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

    4、Embedded Open Type(.eot)：

    .eot字型是IE專用字型，可以從TrueType建立此格式字型,支援這種字型的瀏覽器有【IE4+】；

    5、SVG(.svg)格式：

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

    所以，如果不考慮手機上的字型相容，實際上只需要2種格式就好.

    （1）eot ：用於相容IE瀏覽器的字型格式
    （2）woff ：其他非IE瀏覽器都已經相容的字型格式

 

二、擷取你所需要的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的文法來調用他就可以了。

 

三、在你的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‘}

Google Font字型本地化使用提高網站訪問速度