關於 Web Typography。過去,你若想讓網頁上出現多樣性的字型與排版,往往得將文字作成圖片或 Flash 來顯示。如此一來常常使網頁失去文字複製、搜尋引擎最佳化 (SEO) 的功能,一個網頁製作再精美,但卻沒有人可找來閱讀的話,也是徒勞無用的。
於是你想使用瀏覽器預設的功能,但又不想屈就於有限的作業系統內建字型,這該怎麼辦?你或許會利用像是 sIFR, FLIR, Typeface.js 或 Cufón 等替代方案。
以 sIFR (Scalable Inman Flash Replacement) 來講,sIFR 是利用 Java Script 與 Flash 動態的替換瀏覽器上的文字,字型則來自網頁設計者預先從系統中設定欲使用的字型於 Flash 中。
而 Cufón 概念亦差不多,不過作法是先將字型外型轉成 Java Script/JSON 格式,實際使用時再利用 HTML5 Canvas 繪出字型。Cufón 的作法所生成的 Java Script 雖比所用的 Truetype 字型小,但其實檔案大小也頗大,BCSEEATI 試驗了一分割字型方式,可有效降低傳輸量,但需把字型計算工作轉移到伺服器端。
Cufón 的一項缺點是,用了 Canvas 來繪圖,結果造成使用者無法點選文字。關於這個問題,TypeSelect 與 Typeface.js 用 span tag 解決的選字的問題。這些作法都頗討厭,因為你要求瀏覽器為了美觀顯示,多做了圖形運算或重複塞了一圖一字就為了美觀跟可選字。
若是可以讓瀏覽器直接依字型繪字不是很好嗎?在 Firefox 3.5 (Gecko 1.9.1) 後,Firefox 開始支援了 CSS 的@font-face 語法。於是,你有機會可以用 font-family 來指定一些擺在網路上 TrueType 或 OpenType 字型,直接讓流覽器繪出美麗的文字 (中文版: 顛覆網路 35 天 (4b): 以 @font-face 使用你喜歡的字體 by BobChao)。 文泉驛的雲字體計劃便是應用 CSS 更換字型的例子之一。
但是對於字型廠商來說,並不樂見讓你隨意在網路上使用 TrueType 或 OpenType 字型。主要的原因就是版權濫用,同樣的一套字型很可能會被大量複製。另外,對於瀏覽器開發者而言,納入 DRM 控制網頁用字型顯然是與網路傳統背道而馳。對使用者而言,這兩種格式都太大,會浪費相當頻寬下載所需字型。
就頻寬的問題而言,其中一種解決方式如 Microsoft 所倡議的 Embedded OpenType (EOT),解決方案是以工具掃瞄網頁,並從字型檔中抽出網頁所需的字型。這樣的確可以降低頻寬使用,但是總覺的每次都要產生特定的字型檔實在有點太麻煩。
比較好的作法或許使利用壓縮的機制來降低傳輸量。Mozilla 的 Jonathan Kew 於是提議了一種新的規格 ZOT,基本上就是 OpenType 的壓縮,但壓縮的是 SFNT 字型檔中的獨立表格。這種格式的好處是有效壓縮字型檔大小,在 Web Open Font Format for Firefox 3.6 一文中提到,此格式可將 3.1MB 的 TTF 字型檔壓縮成 1MB 左右。另外一個好處是由於 table 獨立壓縮,因此像是記憶體容量較小的行動裝置,可以下載字型後依照 cmap 表格找到相對應的字型,依照需求再逐一解縮壓,可解省些系統支援。
另外一個需求會是版權的問題,Jonathan Kew 倡議 ZOT 時,同時有人為了字型供應商的需求做了 .webfont 格式。基本上的用意是希望能夠在字型中夾帶一些 metadata,使供應商可以追蹤網站所使用字型是否符合版權,但是不加以 DRM 保護。這個提議已經得到一些字型供應商的支持。
這些規格加起來就是 WOFF File Format 在新釋出的 Firefox 3.6 中,預定支援 Web Open Font Format (WOFF) 之格式。ars technica 有一篇詳盡的報導 Web Open Font Format backed by Mozilla, type foundries,介紹了 WOFF 中的一些規格演繹與技術說明。在 after Firefox 3.6 – new font control features for designers 一文中有相當精彩的字型應用展示,如利用網頁字型重現傳統印刷字等。
目前此規格已經在 W3 的 Web Fonts Working Group Charter 中,目前只有 Firefox 支援 WOFF,接下來要便看其他的瀏覽器是否願意支持此規格了。可於 www-font 郵遞論壇追蹤最新的進展。
2009-12-02 後記: John Boardley 的 Web fonts. Where are we? 亦相當有參考價值。簡體中文翻譯請見關於 Web 字體:現狀與未來。