IT兄弟連 HTML5教程 CSS3屬性特效 自定義文字

 

字體使用是網頁設計中不可或缺的一部分。常常地，咱們但願在網頁中使用某一特定字體，可是該字體並不是主流操做系統的內置字體，這樣用戶在瀏覽頁面的時候就有可能看不到真實的設計。美工設計師最常作的辦法是把想要的文字作成圖片，這樣作有幾個明顯缺陷：

Ø　不可能大範圍的使用該字體；

Ø　圖片內容相對使用文字不易修改；

Ø　不利於網站SEO（主流搜索引擎不會將圖片alt內容做爲判斷網頁內容相關性的有效因素）。

網絡上有一些使用sIFR技術、或javascript/flash hack的方法，但實現起來或繁瑣，或有缺陷。下面要講的是如何只經過CSS的@font-face屬性來實如今網頁中嵌入任意字體。

（1）第一步

獲取要使用字體的三種文件格式，確保能在主流瀏覽器中都能正常顯示該字體。

▪  TTF或.OTF，適用於Firefox 3.五、Safari、Opera

▪  EOT，適用於Internet Explorer 4.0+

▪  SVG，適用於Chrome、iPhone

下面要解決的是如何獲取到某種字體的這三種格式文件。通常地，咱們在手頭上（或在設計資源站點已經找到）有該字體的某種格式文件，最多見的是.TTF文件，咱們須要經過這種文件格式轉換爲其他兩種文件格式。字體文件格式的轉換能夠經過網站FontsQuirrel或onlinefontconverter提供的在線字體轉換服務獲取。這裏推薦第一個站點，它容許咱們選擇須要的字符生成字體文件（在服務的最後一個選項），這樣就大大縮減了字體文件的大小，使得本方案更具實用性。字體聲明以下：

（1）第一步

下載一種字體到本地後引入該字體，爲該字體命名

 

（2）第二步

在頁面中須要的地方使用該字體：

 

下面的例子是對上述步驟的具體實施，也是自定義文字進行進一步的說明，方便讀者理解及使用自定義文字。這裏咱們在網上下載了「hanyi.ttf」的字體，由於該字體不是系統字體，因此咱們不能直接使用「font-family」的方法爲網頁設置該字體。這時候就須要使用CSS3自定義文字的方法來使用該字體，咱們爲該文字命名爲「itxdl」後就能夠用「font-family」方法來導入該字體了。代碼以下：

 

使用chrome瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果。經過CSS3自定義文字的設置，咱們能夠看到網頁上字體已經變成「hanyi.ttf」的字體樣式了。如圖1所示：

圖1  使用自定義文字

 

使用這個方法咱們就能夠爲本身的頁面設置咱們想要的個性化文字了。是否是很激動，想要爲本身的網站躍躍欲試你早就看好了的文字呢，那就趕忙試試吧。