@font-face是CSS3中的一個模組，他主要是把自己定義的Web字型嵌入到你的網頁中，隨著模組的出現，我們在Web的開發中使用字型就不用再為只能使用Web安全字型煩惱了！肯定會有人問，這樣的東西IE能支援嗎？我告訴大家這個功能其實早在IE4就支援了，你肯定會感到驚訝。如果你看到一些英文網站或blog看到一些很漂亮的自定義Web字型，比如說首頁的Logo，Tags以及頁面中的手寫英文體，一句話這些都是實現的，為了能讓更多的朋友知道如何使用他，今天我主要把自己的一點學習過程貼上來和大家分享。

首先我們一起來看看@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,svg等；
4. weight和style:這兩個值大家一定很熟悉，weight定義字型是否為粗體，style主要定義字型樣式，如斜體。

相容瀏覽器

說到瀏覽器對@font-face的相容問題，這裡涉及到一個字型format的問題，因為不同的瀏覽器對字型格式支援是不一致的，這樣大家有必要了解一下，各種版本的瀏覽器支援什麼樣的字型，前面也簡單帶到了有關字型的幾種格式，下面我就分別說一下這個問題，讓大家心裡有一個概念：

一、TureTpe(.ttf)格式：

.ttf字型是Windows和Mac的最常見的字型，是一種RAW格式，因此他不為網站優化,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字型被認為是一種原始的字型格式，其內建在TureType的基礎上，所以也提供了更多的功能,支援這種字型的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字型是Web字型中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支援元資料包的分離,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字型是IE專用字型，可以從TrueType建立此格式字型,支援這種字型的瀏覽器有【IE4+】；

五、SVG(.svg)格式：

.svg字型是基於SVG字型渲染的一種格式,支援這種字型的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字型，甚至還需要.svg等字型達到更多種瀏覽版本的支援。

為了使@font-face達到更多的瀏覽器支援，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face:

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot?#iefix') format('eot');/*IE*/
	src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
   }

但為了讓各多的瀏覽器支援，你也可以寫成：

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

說了這麼多空洞的理論知識，大家一定想自己動手試試的，例項demo:

HTML Code:

<h2 class="neuesDemo">Neues Bauen Demo</h2>

通過@font-face來定義自己的Web Font:

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

我在這裡採用的是相對路徑，當然大家也可以使用絕路徑。到這裡我們就需要把定義好的字型應用到我們實際頁面中去：

h2.neuesDemo {
	   font-family: 'NeuesBauenDemo'
	}

獲取特殊字型：

我平時都是到Google Web Fonts和Dafont.com尋找自己需要的字型，當然網上也還有別的下載字型的地方,如：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你點這裡將有更多的免費字型。前面幾個連結是幫助你獲取一些優美的怪異的特殊字型!

獲取@font-face所需字型格式：

特殊字型已經在你的電腦中了，現在我們需要想辦法獲得@font-face所需的.eot,.woff,.ttf,.svg字型格式。要獲取這些字型格式，我們同樣是需要第三方工具或者軟體來實現，下面我給大家推薦一款我常用的一個工具fontsquirrel, 連結：http://www.fontsquirrel.com/tools/webfont-generator

使用這個線上字型格式生成工具，我們只需要上傳我們下載回來的一種字型格式，就能生成其它的.eot,.woff,.ttf,.svg字型格式，很方便地說！這款工具的具體使用方法，可參考原文：

或者這個線上字型格式轉換地址：https://cloudconvert.com/ 也是可以的，有其它比較實用方便的網址，歡迎留言提供，方便大家。

到此關於@font-face就介紹完了，不知道大家喜歡不喜歡，如果喜歡的話趕快動手實踐一下，有Blog的可以馬上運用上去，也可以炫一下。