@font-face

語法:

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

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

取值:

<identifier>
字體名稱
<url>
此值指的是你自訂的字體的存放路徑,可以是相對路徑也可以是絕路徑
<string>
此值指的是你自訂的字體的格式,主要用來幫助瀏覽器識別,其值主要有以下幾種類型:truetype, opentype, embedded-opentype, svg等
<font>
定義字體相關樣式

說明:

設定嵌入HTML檔案的字體。
  • 需要兼容目前的主流瀏覽器,需同時使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四種字體格式。
  • 嵌入HTML檔案的字體是指將OpenType字體(壓縮的TrueType字體)檔案映射到客戶端系統,用來提供HTML檔案使用該字體,或取代客戶端系統已有的同名字體。即讓客戶端顯示客戶端所沒有安裝的字體。
  • .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- */ }

    你需要同時提供4種格式的字體

兼容性(同時支援.woff,.ttf,.otf,.svg格式的版本將被視為完全實現該屬性):

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0+ 2.0+ 4.0+ 3.1+ 15.0+ 3.2+ 2.1+ 18.0+
eot 6.0+ 2.0-38.0 4.0-43.0 3.1-8.1 5.0-28.0 3.2-8.1 2.1-4.4.4 18.0-40.0
ttf/otf 6.0-8.0 2.0-3.0 4.0+ 3.1+ 15.0+ 3.2-4.1 2.1 18.0+
9.0+ 3.5+ 4.3+ 2.2+
woff 6.0-8.0 2.0-3.5 4.0 3.1-5.0 15.0+ 3.2-4.3 2.1-4.3 18.0+
9.0+ 3.6+ 5.0+ 5.1+ 5.0+ 4.4+
svg 6.0-11.0 2.0-38.0 4.0-37.0 3.1 15.0-24.0 3.2+ 2.1-2.3 18.0-37.0
38.0-43.0 #1 3.2+ 25.0-28.0 #1 3.0+ 38.0-43.0 #1
  1. 策略修改為只支援windows vista/xp上的svg fonts

示例: