@font-face

@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }

<fontsrc> = <url> [format(<string>)]

<identifier>：

字體名稱

<url>：

此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑

<string>：

此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype, opentype, embedded-opentype, svg等

<font>：

定義字體相關(guān)樣式

• 需要兼容當(dāng)前的主流瀏覽器，需同時(shí)使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四種字體格式。
• 嵌入HTML文檔的字體是指將OpenType字體（壓縮的TrueType字體）文件映射到客戶端系統(tǒng)，用來提供HTML文檔使用該字體，或取代客戶端系統(tǒng)已有的同名字體。即讓客戶端顯示客戶端所沒有安裝的字體。
• .eot(Embedded Open Type)為IE的私有字體格式。Safari3.1開始支持.ttf(TrueType)和.otf(OpenType)。
• 未來.woff(Web Open Font Format)將會取代.ttf(TrueType)和.otf(OpenType)兩種字體格式。
• 示例：使用一個全瀏覽器兼容的自定義字體

  代碼如下：

  @font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9+ */ src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('diyfont.woff') format('woff'), /* chrome、firefox */ url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */ }

  你需要同時(shí)提供4種格式的字體

• 淺綠 = 支持
• 紅色 = 不支持
• 粉色 = 部分支持

1. 策略修改為只支持windows vista/xp上的svg fonts