CSS：@font-face的使用方法 - rainman－IT工程師數位筆記本

文章出處

1.介紹

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

2.語法

@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等；

String	Font Format	Common extensions
"woff"	WOFF (Web Open Font Format)	.woff
"truetype"	TrueType	.ttf
"opentype"	OpenType	.ttf, .otf
"embedded-opentype"	Embedded OpenType	.eot
"svg"	SVG Font	.svg, .svgz

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

3.兼容性

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

1、TureTpe(.ttf)格式：

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

2、OpenType(.otf)格式：

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

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

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

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

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

五、SVG(.svg)格式：

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

4.寫法

根據字體格式的兼容性，意味著在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。為了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face:

@font-face {  	
    font-family: 'YourWebFontName';  	
    src: url('YourWebFontName.eot?') 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 */     
}