CSS：@font-face的使用方法

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>];      
}

取值說明

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

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

三、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

四、weight和style:這兩個值你們必定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。

3.兼容性

說到瀏覽器對@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+】；

5、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 */     
}

5.相關連接

• 用字體在網頁中畫ICON圖標
• CSS3 @font-face
• IcoMoon
• 用字體在網頁中畫icon小圖標
• Font Awesome
• 阿里巴巴矢量圖標庫