@font-face是css3中的乙個模組，他主要是把自己定義的web字型嵌入到你的網頁中，隨著@font-face模組的出現，我們在web的開發中使用字型就不用再為只能使用web安全字型煩惱了！肯定會有人問，這樣的東西ie能支援嗎？我告訴大家@font-face這個功能其實早在ie4就支援了，你肯定會感到驚訝。如果你看到一些英文**或blog看到一些很漂亮的自定義web字型，比如說首頁的logo，tags以及頁面中的手寫英文體，一句話這些都是@font-face實現的，為了能讓更多的朋友知道如何使用他，今天我主要把自己的一點學習過程貼上來和大家分享。
@font-face
取值說明
source:此值指的是你自定義的字型的存放路徑，可以是相對路徑也可以是絕路徑；
format：此值指的是你自定義的字型的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種型別：truetype,opentype,truetype-aat,embedded-opentype,svg等；
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-face
說了這麼多空洞的理論知識，大家一定想自己動手試試的，例項demo:
html code:
<h2 class
="neuesdemo"
>neues bauen demo
h2>
通過@font-face來定義自己的web font:
@font-face
h2.neuesdemo
獲取特殊字型：
獲取@font-face所需字型格式：
CSS3 font face使用例項
windows10作業系統使用例項 1.準備好對應格式的字型庫 2.方正字型使用例項 中文內容 p br p class txttwo abc p body html ie下顯示結果 google ff下顯示結果 android系統下的瀏覽器訪問 3.花紋行楷字型使用 中文內容 p br p cla...
使用CSS3 font face實現個性化字型
在網頁中，我們可以用css的font family屬性來定義字型，然而定義的字型在使用者的電腦上能否正確呈現則要看使用者的電腦是否安裝了該字型。我們經常能看到國外的一些個人 使用了非常漂亮的字型，而這些字型通常在使用者的電腦中是沒有安裝的，所以用font family屬性就無法實現了，今天我們就介紹...
使用CSS3 font face實現個性化字型
在網頁中，我們可以用css的font family屬性來定義字型，然而定義的字型在使用者的電腦上能否正確呈現則要看使用者的電腦是否安裝了該字型。我們經常能看到國外的一些個人 使用了非常漂亮的字型，而這些字型通常在使用者的電腦中是沒有安裝的，所以用font family屬性就無法實現了，今天我們就介紹...