字體轉(zhuǎn)換工具：fontmin-app
在線轉(zhuǎn)換：web-fontmin

本文參考地址：
CSS3 @font-face詳細(xì)用法
網(wǎng)頁中導(dǎo)入特殊字體@font-face屬性詳解

字體使用是網(wǎng)頁設(shè)計(jì)中不可或缺的一部分。經(jīng)常地，我們希望在網(wǎng)頁中使用某一特定字體，但是該字體并非主流操作系統(tǒng)的內(nèi)置字體，這樣用戶在瀏覽頁面的時候就有可能看不到真實(shí)的設(shè)計(jì)。美工設(shè)計(jì)師最常做的辦法是把想要的文字做成圖片，這樣做有幾個明顯缺陷：1. 不可能大范圍的使用該字體；2. 圖片內(nèi)容相對使用文字不易修改；3. 不利于網(wǎng)站SEO（主流搜索引擎不會將圖片alt內(nèi)容作為判斷網(wǎng)頁內(nèi)容相關(guān)性的有效因素）。網(wǎng)絡(luò)上有一些使用sIFR技術(shù)、或javascript/flash hack的方法，但實(shí)現(xiàn)起來或繁瑣，或有缺陷。下面要講的是如何只通過CSS的@font-face屬性來實(shí)現(xiàn)在網(wǎng)頁中嵌入任意字體。

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

語法規(guī)則

@font-face {
  font-family: <YourWebFontName>;
  src: <source> [<format>][,<source> [<format>]]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

YourWebFontName：自定義的字體名稱，最好是使用你下載的默認(rèn)字體，他將被引用到你的Web元素中的font-family。如font-family:"YourWebFontName";
src：設(shè)置字體的加載路徑和格式，通過逗號分隔多個加載路徑和格式；
src：還有一個屬性local(font name)字段，表示從用戶系統(tǒng)中加載字體，失敗后才加載webfont

src:local(font name), url('font_name.ttf')

source：字體的存放路徑，可以是相對路徑也可以是絕路徑；
format：自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,svg等；
weight：定義字體是否為粗體；
style：定義字體樣式，如斜體；

瀏覽器兼容

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

TrueType(.TTF)格式：

.ttf字體是Windows和Mac的最常見的字體，是一種原始格式，因此它并沒有為網(wǎng)頁進(jìn)行優(yōu)化處理。

支持瀏覽器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

OpenType(.otf)格式：

以TrueType為基礎(chǔ)，也是一種原始格式，但提供更多的功能。

支持瀏覽器：Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+

Web Open Font Format(.woff)格式：

針對網(wǎng)頁進(jìn)行了特殊優(yōu)化，因此是Web字體中最佳格式，它是一個開放的TrueType/OpenType的壓縮版，同事支持?jǐn)?shù)據(jù)包的分離。

支持瀏覽器：IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+

Embedded Open Type(.eot)格式：

.eot字體是IE專用字體，可以從TrueType格式創(chuàng)建此格式字體。

支持瀏覽器：IE4+

SVG(.svg)格式：

.svg字體是基于SVG字體渲染的一種格式。

支持瀏覽器：Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+

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

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

@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 */
}

獲取特殊字體：

我平時都是到Google Web Fonts和Dafont.com尋找自己需要的字體，當(dāng)然網(wǎng)上也還有別的下載字體的地方,如：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你點(diǎn)這里將有更多的免費(fèi)字體。

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

特殊字體已經(jīng)在你的電腦中了，現(xiàn)在我們需要想辦法獲得@font-face所需的eot,woff,ttf,svg字體格式。要獲取這些字體格式，我們同樣是需要第三方工具或者軟件來實(shí)現(xiàn)，下面我給大家推薦一款我常用的一個工具fontsquirrel，Font Converter,cloudconvert。