網頁使用 webfont (雲端字型) 看似能解決以下問題,
– 工程師不用再跟設計師解釋,為什麼網頁上的字型跟設計稿長的不一樣?
– 解決客戶需求「這邊可以用比較活潑的字體嗎?」
– 讓 Windows 的網頁文字不再只是黑體/明體/標楷體套餐?
– 讓跨瀏覽器都能顯示相同字型?
– 網頁編輯人員不用再把特別的字型都做成圖片?
– 讓文字可以有好看的字體,同時也可以被選取、複製、翻譯、向量縮放、被搜尋引擎索引。
– 用其他亞洲語系的系統字型來顯示黑體,如日文 (Meiryo)、韓文 (Malgun Gothic)、中國 (SimHei, Microsoft YaHei),可以讓網頁上的文字顯示得比較不一樣,但可能發生缺字、筆畫不同、或是有些電腦沒裝的問題。
– 讓微軟正黑體粗體的碧、筵、綰不要有多一個空格,或是粗體筆畫異常的問題?

但是也可能發生新的問題,蒐集一些親身遇到或到逛到的中文 webfont 地雷…

一、webfont 載入速度

不管是用免費的 font 還是付費的 webfont ,基本上都會遇到以下情況:
1.一開始網頁上完全看不到任何字,經過數秒之後才會顯示出來。尤其文字越大段,網路越慢(如3G)的時候。(Flash of invisible text, FOIT)
2.網頁一開始還是一般的系統字型,但是看文章看到一半,網頁會閃一下,然後變成套用 webfont 的樣子。(Flash of unstyled text, FOUT)
3.開啟網頁時,游標旁帶著漏斗的時間特別長。

有些 webfont (如 typesquare, justfont) 提供下載完成後淡入的功能 ,降低 FOUT 的不適感。
有些 webfont 支援用 Web Font Loader 載入,降低 FOIT 發生的情況。
如果是靜態網頁,可以考慮每次把網頁字型用 font spider 壓一遍,於是要再寫更多的 code,增加維護時間或開發時間,但仍是不夠完美。

二、網頁中毒了?

打開網頁之後,等老半天文章區都是白的,文字正常顯示之後卻顯示得亂七八糟…
難道是電腦或手機中毒了嗎? 還是新聞網被駭客攻擊了?


點此放大
喔!原來是在辦雲端字型的宣傳活動 字型的多變滋味 讓生活更添趣味 | 生活新聞 | 生活 | 聯合新聞網

三、免費的圓體 webfont 在 iOS 上面有雷

圓體是設計師做稿時經常使用的字型…….不過網頁不是平面設計!

幸好現在 Google Fonts 的全民公測 Early Access 專區有免費的圓體 webfont (cwTeXYen)可以使用,不過遇到網頁有數字+使用 iOS 裝置的時候,會發生上圖的慘劇。

問題點大概是網頁上寫的那樣,Mac OS X, Windows and GNU+Linux all render OpenType Layout shaping. Some font does not currently work on iPhones and iPads, because iOS doesn’t render OpenType Layout shaping, only AAT shaping. 所以網頁字型,不是只有 TTF, WOFF, EOT, SVG 格式問題要討論,還有水更深的東西。

於是要再寫更多的 code 去調整。

四、一個黑體各自表述


點此放大
上網時遇到的案例,吐槽點實在太多,不知從何講起
– 如果是在做眼動儀實驗,我的眼睛肯定在字母 e 上面打轉了好幾秒。
– 在 Edge 上面每行的字數跟其他瀏覽器不一樣,開頭落一個字的情況是許多客戶都很在意的,雖然在現代瀏覽器+RWD 上刁這個一點意義都沒有。
– 明明內文是全部用信黑體,但是為什麼在 Chrome 跟 Firefox 會跑出明體?
– 有些字的筆劃會突然變粗,相當不穩定

五、那些被 GFW 和諧的 Webfont 們

有一次 WordPress 更新之後,預設會讓網頁載入 Google Fonts 內的 Open sans 字型,這功能本來沒什麼值得好談的。

但是匪區的網友們發現 WordPress 的網站更新後都變慢了,原來是因為匪區網路根本無法訪問 Google Fonts 的 fonts.googleapis.com 域名,造成網頁卡頓,然後網路上就多了一堆「禁止WordPress 加载Google Fonts 」之類的教學文章。

根據中國內地的情報指出,Adobe typekit 跟 webtype 都是處於無法正常連線,或是域名汙染的狀態,所以想要在境外製作一個網頁給中華人民共和國的人民看,記得不要使用太多國外的 webfont ,以免因為瀏覽器渲染阻塞等情況,讓網頁開起來超慢。

六、每個瀏覽器文字粗細不同,特殊符號變豆腐

需求是要讓網頁上的一大段文字顯示楷體,Windows 和 Mac 可以用標楷體來達成, font-family: "標楷體", DFKai-sb, BiauKai;,但是在 Android 跟 iOS 等行動裝置卻會變成黑體,於是用 webfont 的時候又到了。

楷體 webfont
成功達成所有裝置都顯示楷體,但是明明設同一個 font-weight 數值,在各作業系統、各瀏覽器顯示的粗細卻各有差異,但這還不打緊。

然後在某些電腦,全形空白或是符號,還會出現字距不一,甚至變成一堆口口口的情況!

七、瀏覽器設定導致 webfont 無法顯示


字型檔案畢竟是一個從外部網站下載到本地端的東西,所以理論上也有夾帶病毒的風險。

所以有一些瀏覽器或防毒軟體的設定有機會讓網頁的 webfont 一輩子都跑不出來,例如 Firefox 的 gfx.downloadable_fonts.enabled 。

或是使用 IE 瀏覽器,瀏覽器有調整過安全設定,或是網站因為不同原因列入限制的網站,有一些相關設定也會讓 webfont 無法顯示。

八、中文字做 CSS3 scale, skew, rotate, animation 時各種狀況

對中文字做一些 css transform(scale, skew, rotate) 效果時,有機會得到看起來不太正常的中文字。
設定 css animation 時,也有機會在動畫進行中,發生文字模糊、瞬間消失等情況。

不過這個其實不只中文 webfont,其實一般的細明體、正黑體也會產生非預期的效果。

九、第三方服務的風險

使用第三方服務,就要承擔各種連線狀況,或是服務變更的情況,例如…
网站卫士前端公共库停止运行公告 在 Google Fonts 在大陸被和諧時,有些人會把字型路徑改用网站卫士託管的Google字体库,但是後來這服務也收掉了
justfont支援大部分的瀏覽器 Internet Explorer 9 以上
TypeSquare – 【支援服務公告】Internet Explorer 9、 Internet Explorer 10 支援服務結束通知

別跟我談什麼2017 年都已經過一半了,瀏覽器的使用者比例怎樣怎樣。對網頁製作人員而言,使用者只有三種,一種是真的使用者,一種是聲稱「我也是使用者耶」的業主使用者,另一種是負責付錢決策的使用者(a.k.a.業主、甲方)。

十、除了怕瀏覽器 render 中文字的地雷,還怕缺字

如下圖所示,不管是 justfont, typesquare, 華康威 font, ifontcloud 都有碰到缺字的情況,幸虧這些雲端字型通常可以試用,或是提供預覽功能,技術評估時可以及早發現,無法治療。

其實做繁體中文 webfont 很辛苦,情報指出簡中、日、韓的 webfont 通常都不會超過 9000 字,然後繁體中文基本上都是 13000 字起跳,才能確保網頁不會「剛好」缺字。

至於上述範例的繁體中文雲端字型,每套大致都有 1 萬字以上,為什麼還會缺字呢? 缺字通常發生在商品名稱、人名、內文、專有名詞包含一些罕用字或異體字。像 全字庫 CNS11643 就收錄了 4 萬多字,那只有 1 萬多字的雲端字型,怎麼可能完美呈現而不缺字呢?

還有些商品介紹文案,或是商品小常識之類的文章,經常會中日韓文混打,這種多語系文字混打的情況,常常也讓可能只有只有支援單一語系的 webfont 感到為難。不過 webfont 是機器,當然不會感到為難,感到為難的通常是該死的網頁設計人員。

延伸閱讀