@font-face 用法

此屬性的作用可以引入網路字型，如果不使用此屬性，那麼只能夠使用本機已經安裝的字型。

@font-face是css3新增的一個模組，其實在上世紀90年代，從IE4瀏覽器就開始支援，不過僅限於IE瀏覽器。

但是由於一些支援和效果上的原因，在css2.1中就刪除了此屬性；後來CSS3增加了此屬性。

語法結構：

[CSS] 純文字檢視 複製程式碼
@font-face {
  font-family: <YourWebFontName>;
  src: <source> [<format>][,<source> [<format>]]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

引數解析:

（1）.YourWebFontName:必需，自定義字型的名稱。

（2）.source:必需，規定自定義字型的路徑，可以是相對路徑也可以是絕對路徑。

（3）.format:可選，規定自定義字型的格式，用來幫助瀏覽器識別，主要型別:truetype,opentype,truetype-aat,embedded-opentype,avg等。

（4）.font-weight:可選，規定字型是否為粗體。

（5）.font-style:可選，規定字型的樣式，比如斜體。

常見自定義字型格式:

1.Embedded Open Type(.eot)格式:

.eot字型是IE專用字型，可以從TrueType建立此格式字型。

瀏覽器支援:

IE4和IE4以上瀏覽器。

2.TureTpe(.ttf)格式:

.ttf字型是Windows和Mac的最常見的字型，是一種RAW格式，因此不為網站所優化。

瀏覽器支援:

（1）.Firefox3.5+。

（2）.Chrome4.0+。

（3）.Safari3.1+。

（4）.Opera10.0+。

（5）.iOS Mobile Safari4.2+。

3.Web Open Font Format(.woff)格式:

.woff字型是Web字型中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支援後設資料包的分離。

瀏覽器支援:

（1）.IE9+。

（2）.Firefox3.5+。

（3）.Chrome6+。

（4）.Safari3.6+。

（5）.Opera11.1+。

4.OpenType(.otf)格式:

.otf字型被認為是一種原始的字型格式，其內建在TureType的基礎上，所以也提供了更多的功能。

瀏覽器支援:

（1）.Firefox3.5+。

（2）.Chrome4.0+。

（3）.Safari3.1+。

（4）.Opera10.0+。

（5）.iOS Mobile Safari4.2+。

5.SVG(.svg)格式:

.svg字型是基於SVG字型渲染的一種格式。

瀏覽器支援:

（1）.Chrome4+。

（2）.Safari3.1+。

（3）.Opera10.0+。

（4）.iOS Mobile Safari3.2+。

程式碼例項如下:

[CSS] 純文字檢視 複製程式碼
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

上面將引入的字型自定義名稱為"MyWebFont"；並且能夠相容低版本IE瀏覽器。

相容性處理介紹如下:

（1）.在標準瀏覽器中，src屬性支援後面跟著多個url，不同的瀏覽器會選擇適合自己的字型；但是IE9之前的瀏覽器並不支援，當 src屬性包含多個url時，它無法正確的解析而返回404錯誤，於是把僅IE9之前支援的EOT格式放在第一位，然後在url後加上 ?，這樣 IE9之前的版本會把問號之後的內容當作 url 的引數；#iefix的作用，一是起到了註釋功能，二是可以將url引數變為錨點，減少傳送給伺服器的字元。

（2）.在上面的程式碼中，我們看到了兩個src屬性，通常只寫下面的一個即可，第一個是為了支援IE9下的相容模式（也就是IE9瀏覽器下使用IE7或者IE8預設渲染頁面）;由於在相容模式下，瀏覽器對自定義字型的解析模式發生了變化，使用第一條中問號的方式已經失效，解決方案就是新增一個src: url('webfont.eot')。