WOFF 檔案測試

woff

大部分網站所用的字型來來去去都是這幾個，實在沒有甚麼特別。近年來的外國網站都喜歡用 sIFR 之類的方式來顯示其他用戶未必有安裝的字型，應用例子有 Adobe 官方網站的網頁標題用了 Myriad。不過都只是用於標題顯示，未有廣泛地連內文都用上自訂字型。
Firefox 3.6 已經開始支援 Web Open Font Format (WOFF)。相信未來會有更多的瀏覽器支援 WOFF。WOFF 是將現時的 TrueType、OpenType 包裝，是專為網頁顯示而設。WOFF 會將字型壓縮，縮短載入的時間。而且還可以有 OpenType 的 Advanced Typography 功能。網站使用時只需要將 WOFF 檔放到伺服器中，然後在網頁的 CSS 檔中加入 @font-face 部分宣告 WOFF 檔的路徑，那就可以在 CSS 使用那個字型了。其中一個例子是 Firefox 3.6 更新完成網頁整頁用了 Meta Web Pro。
現時大多數的 WOFF 字型都是西文字型，中文字型就暫時不多。我知道的只有文泉驛雲字體計劃，但都只是在測試階段。主要原因是因為中文字型檔案太大，每個中文字都要獨立地儲存形狀。而且字元數量大，數量可以是無限的多。所以現時的做法暫時仍未能將自定的中文字型嵌入到網頁中。
我弄了一個網頁來測試像 New Railway 的圖像字型的顯示效果。（網址是 http://apps.efilm.net.ru/woff/）字體效果應該要像下圖般才算正常（CSS 3 的圓角效果不是這個測試的重點）：
測試結果由於我的電腦只是裝了以下的瀏覽器，所以就用了它們來試：

• Firefox 3.6
• Opera 10.10
• Internet Explorer 8.0.6001.18702
• Google Chrome 4.0.249.89
  

Firefox 和 Opera 的顯示效果全部正常，但 Google Chrome 就顯示不到圖層字元的一部分字元。相信是字型渲染的問題。而情況最差的就是 Internet Explorer，由於網站有同時提供 EOT 檔給 IE 使用（留意是 EOT 檔而不是 WOFF 檔），所以還可以看到嵌入的字型。不過無闊度字元好像都變了有闊度，令到圖像完全不成形。不知道這個問題是轉換器的問題還是 IE 的問題。
顯示效果可以在文章最尾處看到。
製作 WOFF 檔暫時相信仍未有專門的軟件來製作 WOFF 檔。基本上都是要用現存的字型軟件來製作字型，做完後才轉換成 WOFF 檔。Font Squirrel 提供了一個免費的網上轉檔工具。我的 New Railway 都是用這個工具轉換成 WOFF 檔。這個工具可以將你上載的 TTF 或 OTF 檔轉換成 WOTT、SVG 或 EOT 檔。你還可以按需要選擇轉換出來的字型檔只包那些字元，這個功能可以將網頁不會用到的字元抽走，這就可以讓字型檔的檔案大小降低。
現成的 WOFF 檔由於要使用字型就要上載字型，所以人人都可以存取到你的 WOFF 檔。如果你想使用商業字型的話，那你就要注意這一點。因為嵌入的字型檔已經上載到網上，版權持有人是更容易地發現你是未經授權使用他的作品。所以都是避免使用商業字型來轉換成 WOFF 檔使用。
其實現在字體製造商都開始出售 WOFF 檔，FontFont 亦有提供 FF Nuvo Web Medium 供免費下載使用。而先前提及過的 Font Squirrel 也有提供免費的 WOFF 字型。其他的字型下載網站 Typekit 和 Fontspring 亦有提供免費的 WOFF 字型下載使用。
TMB 2 會否提供 WOFF 檔？大部分的字型可以提供，因為只是簡單的轉檔。但要留意 TMB 2 的字型所包含的字元數量其實都不算太多。另一點要留意的是像 New Railway 和 New Traffic 的圖像字型是使用 Unicode 字符來組圖。如果瀏覽器不支援嵌入字型的話就只會顯示一堆無意義的字符，那就看不到圖像，就不知道網頁想表達甚麼。同時亦要留意網站親和力的問題：當使用讀屏軟件的人瀏覽到這些網頁時，軟件只會讀出一些無意義的文字，結果這就和瀏覽器不支援嵌入字型的使用者一樣，都是不知道網頁的內容。我的測試網頁只是用來測試渲染效果，大家切勿將圖像字型加到網頁使用。如果有需要加入圖像字型的圖像的話，應用圖像製作軟件製作圖像。然後加到網頁時為圖像加上替代文字 (alternative text)。
不過其他西文字型是可以提供 WOFF 檔，有消息的話會在 eFilm World 公佈。
在 Mozilla Firefox 3.5.8 下的顯示效果


在 Opera 10.10 下的顯示效果


在 Google Chrome 4.0.249.89 下的顯示效果