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

Microsoft WEFT

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

ttf2eot

可以轉換TTF文件為EOT格式。

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

• http://ttf2eot.sebastiankippe.com
• http://www.cuvou.com/wizards/ttf2eot.cgi
• http://onlinefontconverter.com/

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

瀏覽器兼容性一覽

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

Browser@font-faceTrueTypeWOFFEOTSVGSVGZ

IE	4+	9+	9+	4+	?	?
火狐	3.5+	3.5+	3.6+	?	?	?
谷歌	4+	4+	6+	?	4+	6+
蘋果	3.1+	3.1+	6+	?	3.1+	3.1+
opera	10+	10+	11.1+	?	10+	10+

?在線字體轉換網址：

https://www.fontke.com/tool/convfont/

https://www.web-font-generator.com/

（來源：夢想天空? 原文：Web字體格式介紹及瀏覽器兼容性一覽）

總結

以上是生活随笔為你收集整理的Web字体格式介绍及浏览器兼容性一览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。