網頁嵌入自定義字體方法

@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中。經常地，我們希望在網頁中使用某一特定字體，但是該字體並非主流操作系統的內置字體，這樣用戶在瀏覽頁面的時候就有可能看不到真實的設計。美工設計師最常做的辦法是把想要的文字做成圖片，這樣做有幾個明顯缺陷：1. 不可能大范圍的使用該字體；2. 圖片內容相對使用文字不易修改；3. 不利於網站SEO（主流搜索引擎不會將圖片alt內容作為判斷網頁內容相關性的有效因素）。網絡上有一些使用sIFR技術、或javascript/flash hack的方法，但實現起來或繁瑣，或有缺陷。下面要講的是如何只通過CSS的@font-face屬性來實現在網頁中嵌入任意字體。

 

先看下@font-face的語法規則：

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

取值說明

1、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑；

3、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:這兩個值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。

 

實現步驟：

第一步

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

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

下面要解決的是如何獲取到某種字體的這三種格式文件。一般地，我們在手頭上（或在設計資源站點已經找到）有該字體的某種格式文件，最常見的是.TTF文件，我們需要通過這種文件格式轉換為其余兩種文件格式。字體文件格式的轉換可以通過網站FontsQuirrel或onlinefontconverter提供的在線字體轉換服務獲取。這里推薦第一個站點。

關於 獲取特殊字體：

推薦2個網站：Google Web Fonts和Dafont.com。當然你也可以選擇其他的。

 

關於 字體轉換，點擊這里，主要設置的參數如下：

 

 

第二步

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

字體聲明如下：

 @font-face {
      font-family: 'pingfang';
      src: url('../fonts/pingfang-webfont.eot');
      src: url('../fonts/pingfang-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/pingfang-webfont.woff') format('woff'),
       url('../fonts/pingfang-webfont.ttf') format('truetype'),
       url('../fonts/pingfang-webfont.svg#pingfang') format('svg');
      font-weight: normal;
      font-style: normal;
   }

到這里為止，我們已經通過@font-face自定義好所需的pingfang字體，離最后效果只差一步了，就是把自己定義的字體應用到你的Web中的DOM元素上：

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

 

更詳細的文章推薦：CSS3 @font-face