字型提供用以顯示文字的資源。簡單來說，它就是包含了將文字編碼對應到形狀的一組規則。通常，參考一套標準字型特性，會將享有共同設計元素的字型進行字型家族的分類。同一家族內的字型，筆畫粗細、傾斜度或相對寬度可以有所不同。

標準：CSS Fonts Module Level 3
日期：December 11, 2012

用來描繪文字的字體 (font face) 取決於該元素的字型家族及字型特性。

• 字型選擇 (font-family)
  • [ family-name | generic-family ]#
  • 以逗點隔開的字型家族清單
  • 字型家族名稱若有空格，須用引號包著
  • 客戶端會從左到右依序搜尋系統字型，先找到先贏
  • 最後一個建議放 serif (端點較突出), sans-serif, cursive, fantasy, 或是 monospace
  • 上述關鍵字並不是指特定的字型，客戶端會對應到自定義的預設字型，所以會依客戶端而異
• 指定粗細 (font-weight)
  • normal | bold | bolder | lighter | 100-900
• 指定寬窄 (font-stretch)
  • normal | ultra-condensed | extra-condensed | condensed | semi-condensed
  • semi-expanded | expanded | extra-expanded | ultra-expanded
• 指定斜體 (font-style)
  • normal | italic | oblique
  • italic 通常指的是草書；oblique 則是字體傾斜
• 指定大小 (font-size)
  • absolute-size | relative-size | length | percentage
  • absolute-size: xx-small | x-small | medium | large | x-large | xx-large
  • relative-size: larger | smaller
• 相對大小 (font-size-adjust)
  • none | auto | number
  • 固定的字型大小，在不同字體之間，看起來的大小不盡相同
  • 小寫字與大寫字的相對高度決定了文字的可讀性，稱之為字體的長寬比 (aspect-raio)，定義為 x-height / font-size
  • 由於不同客戶端的可用字型不一樣，當選用字體不一致時，會造成字型大小外觀的差異。這時就可用這個屬性進行調整，讓 x-height 都一樣，不管客戶端挑選哪個實際字體進行文字的描繪
• 同時指定多個字型特性 (font)
  • [ [ font-style || font-variant-css21 || font-weight || font-stretch ]? font-size [/ line-height]? font-family] | caption | icon | menu | message-box | small-caption | status-bar
  • font-variant-css21: normal | smallcaps
  • 所有字型相關特性會先回復至初始值，然後再設值。所以沒有特定給值的屬性，也會受到影響。
• 控制字體合成 (font-synthesis)
  • none | [ weight || style ]
  • 如果某字型家族並沒有粗體或斜體字體可用，客戶端可用自定義的演算法合成粗體字及斜體字
  • 假如想要關閉此行為，可使用此屬性

在 CSS3 之前，頁面文字所使用的字型必須已經安裝在客戶端才能正常顯示。由於客戶端必須提供的可用字型沒有一定的標準，通常會指定一系列的替代字型，透過 fall back 機制讓客戶端選取字型。只要最後一個替代字型是 serif, sans-serif 等一般字型家族，最低限度在不同客戶端都可選到某個字型進行文字的描繪。

但是由於同一字型家族內的字體也會有高矮胖瘦等差異，顯示出來的效果往往不是網頁設計者的原意。為了解決這個問題，在 CSS3 中，新增了 Web Fonts 功能，使用這個功能，網頁中可以使用安裝在伺服器端的字型，這就能夠維持在不同客戶端都能有相同的文字呈現了。

@font-face 規則定義了一系列的字型描述，每一筆規則皆會針對所有的字型描述給值，沒有明確定義的字型描述會使用初始值。

• 字型家族 (font-family)
  • 定義字型檔所屬的家族名稱
  • 這會蓋掉字型檔附帶資料中的內嵌名稱
• src
  • [ uri [ format(string#) ]? | font-face-name ]#
  • 指定字型檔的位置，可以使用 url() 指向伺服器端或是網路上的資源，並可選擇性的註明字型檔的檔案格式
  • 字型檔的來源也可以是客戶端本身有所安裝的，這時要用 local() 指向客戶端的字型家族名稱
  • 字型檔格式尚未有標準，共有 5 大類，各家瀏覽器支援度不一：

    	woff	truetype	opentype	embedded-opentype	svg
    字型檔格式	Web Open Font Format	TrueType	OpenType	Embedded OpenType	Scalable Vector Graphics
    副檔名	.woff	.ttf	.ttf, .otf	.eot	.svg, .svgz
    IE	9.0+	9.0+ (partial)	9.0+ (partial)	7.0+	X
    Firefox	15.0+	15.0+	15.0+	X	X
    Chrome	22.0+	22.0+	22.0+	X	22.0+
    Safari	5.1+	5.1+	5.1+	X	5.1+
    Opera	12.1+	12.1+	12.1+	X	12.1+
    iOS	5.0+	4.2+	4.2+	X	3.2+
    Android	X	2.2+	2.2+	X	3.0+

• font-style
• font-weight
• font-stretch
• unicode-range
• font-variant
• font-feature-settings