在網頁中嵌入任意字體的解決方案---google在線字體庫應用


字體使用是網頁設計中不可或缺的一部分。經常地,我們希望在網頁中使用某一特定的字體, 但是該字體並非主流操作系統的內置字體,我們常用的方法就是把特殊字體處理成圖片,這樣做有很多缺陷, 但是最近谷歌發布了Google在線字體庫,這樣在網站設計的時候只要調用Google在線字體庫就可以讓網頁在客戶端很好的顯示,而不用只用枯版的字體了,實現字體多樣化。

 
特殊字體處理成圖片弊端
1、不可能大范圍使用
2、不易修改
3、不利於seo優化
利用google在線的字體庫優勢
1、可繼續使用html文本 比起自己自做字體庫上傳到自己的服務器可以減輕服務器負擔
2、兼用性好,不 需擔心像各個瀏覽器對 CSS 解析不同導致這樣那樣的 bug、HACK。
3、無需引用js
但是也存在一定的弊端,
1、只能引進應為的字體庫,中中文不支持
2、隨時有被牆外的可能性
 
雖然有一定的缺陷,但是google在線字體庫的有時還是很明顯的,下面就介紹下具體的使用方法:
header部分引用要用的字體

<link rel=’stylesheet’ type=’text/css’ href=’http://fonts.googleapis.com/css?family=Font name’ >

在css中使用:

css selector{

   Font-family: “font name”, serif;

}

就是這么簡單

在引用時注意一定要始終有個字體的備份方案,上面的代碼你可能也發現了我使用了serif 來作為后備的字體,這樣做是為了以防萬一

如果你想一次行載入多個字體

http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans

字體名稱之間用 | 隔開,並且不留空格,還要注意Droid Sans字體的使用,對於字體名稱中有空格的,需用 + 符號來代替空格

 Google在線字體庫更多字體: http://code.google.com/webfonts

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM