字體處理

     作網頁常常遇到一些不一樣尋常的字體，咱們老是不知道這些是什麼字體，一個個的查找太麻煩，甚至有的根本就查找不出來，我遇到過，剛剛發現其餘同窗也有這個問題，因此，我以爲這篇文章必須分享出來。如下內容來自http://blog.csdn.net/xiaolongtotop/article/details/8482955

一. 使用Google Web Fonts

Google字體庫裏也有不少時尚和個性化的字體供你選擇，而且因爲是開源字庫，因此無論是商業或者我的，Google Font API都適用。Google Font API並不依賴於JavaScript，所以即便用戶禁用了JavaScript，Google字體依然能夠顯示。Google字體在CSS3中的表現一樣出色，任何額外的樣式均可以被添加，好比CSS 3中的text-shadow屬性.使用這種方法的前提是Google字體庫裏有你須要的字體,具體使用方法以下:

1. 進入Google Web Fonts查找你須要的字體,而後點擊"加入收藏(Add to Collection)"

2. 打開收藏集,點擊"使用(Use)"

3. 進入使用頁面後,會有詳細的使用說明,其中嵌入頁面的方法有三種,咱們通常選第一種最常規的用法,就是直接在頁面頭部引入

[html] view plain copy

1. < span>linkhref='http://fonts.googleapis.com/css?family=Berkshire+Swash'rel='stylesheet'type='text/css'<

4. 而後就能夠直接在樣式文件中直接字義字體了

[css] view plain copy

1. h1 { font-family: 'Berkshire Swash', cursive;}  

實現效果以下:

二. 使用CSS3 @font-face

@font-face是CSS3中的一個模塊， 可以加載服務器端的字體文件，能夠在網頁中嵌入客戶端沒有安裝的字體。具體使用方法能夠參考CSS3 @font-face 使用方法

三. 使用Cufon渲染

Cufon 是一個用來替代 sIFR 框架，實如今網頁中對文字字體進行渲染功能的純 JavaScript 開源類庫(cufon-yui.js)。

Cufon 技術的實現策略其實就是以必定標準，在網頁相關位置上「畫」出了所須要顯示的文字字符，並同時替換原先區域所須要顯示的文字。藉助於瀏覽器所推出的專有頁面繪畫方案，如 VML、Canvas 和 SVG 等，來進行頁面的繪畫。

使用這種方法首先要下載特殊字體文件,以便用來生成JavaScript字體件,下面詳細介紹下使用方法:

1. 引入Cufon核心類庫cufon-yui.js,能夠在Cufon官網下載

2. 在Cufon官網上傳特殊字體文件並生成相應的JavaScript字體件

[html] view plain copy

1. < span>scriptsrc="cufon-yui.js"type="text/javascript"<</>script<
2. < span>scriptsrc="YourFont.font.js"type="text/javascript"<</>script<

3. 在JS中使用Cufon.replace(selector[, options])方法替換特殊字體，selector相似CSS選擇器，詳細用法參見Cufon API

[javascript] view plain copy

1. Cufon.replace('h1');   
2. Cufon.replace('#cufon', {fontFamily:'YourFont', fontSize:'36px', color:'#ff0000'});  

更詳細的使用步驟能夠參見https://github.com/sorccu/cufon/wiki/Usage

瀏覽器支持狀況

Cufon	IE（≥ 5） Firefox（≥ 1.5）Opera（≥ 9.5）Safari（≥ 3）Google Chrome（≥ 1.0）
@font-face	IE（≥ 4，僅支持 OpenType）Firefox（≥ 3.5） Opera（≥ 10.0） Safari（≥ 3.1）