(轉)CSS3 @font-face

http://www.fontsquirrel.com/fontface

@font-face是CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，咱們在Web的開發中使用字體不怕只能使用Web安全字體，大家當中或許有許多人會不天然的問，這樣的東西IE能支持嗎？當我告訴你們@font-face這個功能早在IE4就支持了你確定會感到驚訝。個人Blog就使用了許多這樣的自定義Web字體，好比說首頁的Logo，Tags以及頁面中的手寫英文體，不少朋友問我如何使用，能讓本身的頁面也支持這樣的自定義字體，一句話這些都是@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主要定義字體樣式，如斜體。

兼容瀏覽器

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

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

說了這麼多空洞的理論知識，你們必定有點心癢癢了，那麼咱們先來看看W3CPLUS首頁中導航部分的蘭色字體是如何實現的，假如咱們有一個這樣的DOM標籤，須要應用自定義字體：

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'

}

效果：

看到上面的效果，我想你們會感到@font-face很神奇，同時也想爭着作作看，但是一動手才發現，特殊字體我要怎樣才能獲得，那些.eot,.woff,.ttf,.svg這些字體格式又怎麼獲取呢？有些朋友可能就不知道如何運手了，那麼咱們就帶着這些問題來一個全程完成的實例吧：

1、獲取特殊字體：

咱們拿下面這種single Malta字體來講吧：

要獲得single Malta字體，不外乎兩種途徑，其一找到付費網站購買字體，其二就是到免費網站DownLoad字體。固然要給錢的這種傻事我想你們都不會作的，那咱們就獲得免費的地方下載，在哪有呢？我平時都是到Google Web Fonts和Dafont.com尋找本身須要的字體，固然網上也還有別的下載字體的地方，這個Demo使用的是Dafont.com的Single Malta字體，這樣就能夠到這裏下載Single Malta：

Single Malta下載下來後，須要把它解壓縮出來：

2、獲取@font-face所需字體格式：

特殊字體已經在你的電腦中了，如今咱們須要想辦法得到@font-face所需的.eot,.woff,.ttf,.svg字體格式。要獲取這些字體格式，咱們一樣是須要第三方工具或者軟件來實現，下面我給你們推薦一款我經常使用的一個工具fontsquirrel,別的先很少說，首跟我點這裏進入到下面這個界面吧。

若是你進入頁面沒有看到上圖，你能夠直接點擊導航:

若是你看到了上面的界面，那就好辦了，咱們來看如何應用這個工具生成@font-face須要的各類字體，先把咱們剛纔下載的字體上傳上去：

上傳後按下圖所示操做：

如今從Font Squirrel下載下來的文件已經保存在你本地的電腦上了，接着只要對他進行解壓縮，你就能看到文件列表以下所示：

你們能夠看到，解壓縮出來的文件格式，裏面除了@font-face所須要的字體格式外，還帶有一個DEMO文件，若是你不清楚的也能夠參考下載下來的DEMO文件，我在這裏不對DEMO說明問題，我主要是給你們介紹如何把下載下來的文件有價值的運用到咱們的項目中。

例如在本身的本地建立了一個fontface項目：

爲了讓項目結構更清晰，咱們在項目中單首創建一個fonts目錄，用來放置解壓縮出來@font-face所需的字體格式：

如今@font-face所需字體已經加載到本地項目，如今本地項目中的style.css中附上咱們須要的@font-face樣式

@font-face {

font-family: 'SingleMaltaRegular';

src: url('../fonts/singlemalta-webfont.eot');

src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/singlemalta-webfont.woff') format('woff'),

url('../fonts/singlemalta-webfont.ttf') format('truetype'),

url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');

font-weight: normal;

font-style: normal;

}

到這裏爲止，咱們已經經過@font-face自定義好所需的SingleMalta字體，離最後效果只差一步了，就是把本身定義的字體應用到你的Web中的DOM元素上：

h2.singleMalta {

font-family: 'SingleMaltaRegular'

}

效果：