使用@font-face 屬性 實如今網頁中嵌入任意字體

　字體使用是網頁設計中不可或缺的一部分。網頁是文字的載體，咱們但願在網頁中使用某一特定字體，可是該字體並不是主流操做系統的內置字體，這樣用戶在瀏覽頁面的時候就有可能看不到真實的設計。
　　美工設計師最常作的辦法是把想要的文字作成圖片，這樣作有幾個明顯缺陷：
　　1、不可能大範圍的使用該字體；
　　2、圖片內容相對使用文字不易修改；
　　3、不利於網站SEO。
　　網絡上有一些使用sIFR技術、或javascript/flash hack的方法，但實現起來或繁瑣，或有缺陷。下面要講的是如何只經過CSS的@font-face屬性來實如今網頁中嵌入任意字體。

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

.TTF或.OTF，適用於Firefox 3.五、Safari、Opera 
.EOT，適用於Internet Explorer 4.0+ 
.SVG，適用於Chrome、IPhone

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

而後
　　獲取到三種格式的字體文件後，下一步要在樣式表中聲明該字體，並在須要的地方使用該字體。 
　　字體聲明以下： 

 Example Source Code  [www.52css.com]

@font-face { 
font-family: 'fontNameRegular'; 
src: url('fontName.eot'); 
src: local('fontName Regular'), 
local('fontName'), 
url('fontName.woff') format('woff'), 
url('fontName.ttf') format('truetype'), 
url('fontName.svg#fontName') format('svg'); 
} 
/*其中fontName替換爲你的字體名稱*/ 

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

 

p { font: 13px fontNameRegular, Arial, sans-serif; } 
h1{font-family: fontNameRegular} 

或者 

<p style="font-family: fontNameRegular">掬水月在手，落花香滿衣。</p>

 

[本文摘自52css.com]