TShopping

 找回密碼
 註冊
搜索
查看: 1512|回復: 0

[分享] WOFF 檔案測試

  [複製鏈接]
發表於 2013-2-14 18:08:24 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
大部分網站所用的字型來來去去都是這幾個,實在沒有甚麼特別。近年來的外國網站都喜歡用 sIFR 之類的方式來顯示其他用戶未必有安裝的字型,應用例子有 Adobe 官方網站的網頁標題用了 Myriad。不過都只是用於標題顯示,未有廣泛地連內文都用上自訂字型。
Firefox 3.6 已經開始支援 Web Open Font Format (WOFF)。相信未來會有更多的瀏覽器支援 WOFF。WOFF 是將現時的 TrueTypeOpenType 包裝,是專為網頁顯示而設。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 字型。其他的字型下載網站 TypekitFontspring 亦有提供免費的 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 下的顯示效果






 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-4 07:41 , Processed in 0.059406 second(s), 21 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表