目前，文字資訊仍是**最主要的內容，隨著css3技術的不斷成熟，web字型逐漸成為話題，這項讓未來web更加豐富多彩的技術擁有多種實現方案，其中之一是通過@font-face屬性在網頁中嵌入自定義字型，主流的瀏覽器都支援這項技術，本文介紹主要的幾種web字型格式及各瀏覽器相容情況。
truetype (.ttf)
windows和mac系統最常用的字型格式，其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字型，這使得它們比基於向量的字型更容易處理，保證了螢幕與列印輸出的一致性。同時，這類字型和向量字型一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。
eot – embedded open type (.eot)
opentype (.otf)
opentype是一種可縮放字型（scalable font）電腦字型型別，採用postscript格式，是美國微軟公司與adobe公司聯合開發，用來替代truetype字型的新字型。這類字型的擴充套件名為.otf，型別**是otto，現行標準為opentype 1.4。opentype最初發表於2023年，並在2023年之後出現大量字型。它源於微軟公司的truetype open字型，truetype open字型又源於truetype字型。opentype font包括了adobe cid-keyed font技術。adobe公司已經在2023年末將其字型庫全部改用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格式。
microsoft weft
微軟提供的字型格式轉換工具。
ttf2eot
可以轉換ttf檔案為eot格式。
如果想把otf檔案轉為ttf格式，可以使用fontforge來轉換。
使用css3的@font-face屬性可以實現在網頁中嵌入任意字型，但是ie只支援微軟自有的eot格式字型，而其他瀏覽器都不支援這一字型格式，其它瀏覽器可以設定ttf(truetype)和otf(opentype)兩種字型作為自定義字型，瀏覽器對@font-face屬性及各種字型格式支援詳的細情況如下：
browser
@font-face
truetype
woff
eotsvg
svgz
4+9+
9+4+
3.5+
3.5+
3.6+
4+4+
6+4+
6+3.1+
3.1+
6+3.1+
3.1+
10+10+
11.1+
10+10+
原文：web字型格式介紹及瀏覽器相容性一覽）
Web字型格式介紹及使用
web字型格式介紹 truetype ttf windows和mac系統最常用的字型格式，其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字型，這使得它們比基於向量的字型更容易處理，保證了螢幕與列印輸出的一致性。同時，這類字型和向量字型一樣可以隨意縮放 旋轉而不必擔心會出現鋸齒。存在於c...
瀏覽器對字型格式的支援詳解
align center size x large 瀏覽器對字型格式的支援詳解 size align b 1.1概述 b 不同的瀏覽器對字型格式支援是不一致的。字型的格式包括.tff otf woff eot svg五種格式。b 1.2格式介紹 b b 1.2.1 turetype ttf 格式 b...
Web前端瀏覽器相容問題
問題1 塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比 設定的大 問題描述 塊狀元素被新增float屬性後，在ie6顯示橫行margin值加倍。解決方法 在float的標籤樣式控制中加入 display inline 將其轉化為行內屬 性。問題2 設定較小高度標籤 ...