Web字型格式介紹及瀏覽器相容性一覽

lhb25發表於2013-02-01

　　目前，文字資訊仍是網站最主要的內容，隨著CSS3技術的不斷成熟，Web字型逐漸成為話題，這項讓未來Web更加豐富多彩的技術擁有多種實現方案，其中之一是通過@font-face屬性在網頁中嵌入自定義字型，主流的瀏覽器都支援這項技術，本文介紹主要的幾種Web字型格式及各瀏覽器相容情況。

Web字型格式介紹及瀏覽器相容性一覽

　Web字型格式介紹

　　TrueType (.ttf)

　　Windows和Mac系統最常用的字型格式，其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字型，這使得它們比基於向量的字型更容易處理，保證了螢幕與列印輸出的一致性。同時，這類字型和向量字型一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。

　　EOT – Embedded Open Type (.eot)

　　嵌入字型格式（EOT）是微軟開發的一種技術，允許 OpenType 字型嵌入到網頁並可以下載至瀏覽器渲染，瀏覽器根據 CSS 中 @font-face 的定義，下載，渲染這種 .EOT 字尾的字型檔案。這些檔案只在當前頁活動的狀態下，臨時安裝在使用者的系統中。

　　OpenType (.otf)

　　OpenType是一種可縮放字型（scalable font）電腦字型型別，採用PostScript格式，是美國微軟公司與Adobe公司聯合開發，用來替代TrueType字型的新字型。這類字型的副檔名為.otf，型別程式碼是OTTO，現行標準為OpenType 1.4。OpenType最初發表於1996年，並在2000年之後出現大量字型。它源於微軟公司的TrueType Open字型，TrueType Open字型又源於TrueType字型。OpenType font包括了Adobe CID-Keyed font技術。Adobe公司已經在2002年末將其字型庫全部改用OpenType格式。

　　WOFF – Web Open Font Format (.woff)

　　相對於 TrueType 和 OpenType ，WOFF（Web開發字型格式）是一種專門為了 Web 而設計的字型格式標準，它並不複雜，實際上只是對於 TrueType / OpenType 等字型格式的封裝，並針對網路使用加以優化：每個字型檔案中含有字型以及針對字型的後設資料（Metadata），字型檔案被壓縮，以便於網路傳輸，並且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在內的幾乎所有主要的字型供應商都加入到支援 WOFF 的行列中來

　　SVG (Scalable Vector Graphics) Fonts (.svg)

　　顧名思義，就是使用SVG技術來呈現字型，還有一種gzip壓縮格式的SVG字型.svgz。SVG可縮放向量圖形（Scalable Vector Graphics）是基於可擴充套件標記語言（XML），用於描述二維向量圖形的一種圖形格式。SVG由W3C制定，是一個開放標準。SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述影像內容，因此是一種和影像解析度無關的向量圖形格式。SVG可以使你設計的網頁可以更加精彩細緻，使用簡單的文字命令，SVG可實現色彩線性變化、路徑、自定義字型、透明效果、濾鏡效果等各式常見的圖形影像效果。

　字型格式轉換工具

　　EOTFast

　　這個工具我剛用過，非常好用的一個工具，用於把TTF檔案轉為EOT格式。

Web字型格式介紹及瀏覽器相容性一覽

　　Microsoft WEFT

　　微軟提供的字型格式轉換工具。

　　ttf2eot

　　可以轉換TTF檔案為EOT格式。

　　另外推薦幾個線上的轉換工具：

　　如果想把OTF檔案轉為TTF格式，可以使用FontForge來轉換。

　瀏覽器相容性一覽

　　使用CSS3的@font-face屬性可以實現在網頁中嵌入任意字型，但是IE只支援微軟自有的EOT格式字型，而其他瀏覽器都不支援這一字型格式，其它瀏覽器可以設定TTF(TrueType)和OTF(OpenType)兩種字型作為自定義字型，瀏覽器對@font-face屬性及各種字型格式支援詳的細情況如下：