網站中文字體問題

網頁設計

中文網站最常犯的錯誤就是用錯字體。以下例子比較兩個網站,一個是 BBC News 中文網站,一個是本土謎米 News 網站。平台是 Windows 8.1 英文版上執行 Chrome 瀏覽器,當兩者並排比較,你很容易發現 BBC News 中文容易閱讀得多,主要原因是字體。

bbc-new

meme-new

充分說明這個問題,我們需要談些歷史。

何謂無襯線 Sans 和有襯線 Sans Serif 字體

BBC News 中文顯示用的是微軟正黑體,而謎米顯示所用的是新細明體。前者微軟正黑體約略始自 2008 年,是 Windows 7 以後的微軟視窗繁體版的標準系統字體 (System Font),如果安裝的視窗不是繁體版亦可以透過視窗更新 Windows Update 下載繁體語言包而自動安裝。

jhenghei

後者新細明體約略始自 1993 年,字體來自台灣華康科技 Dynalab,是視窗 95, Me , XP 繁體版的標準系統字體。台灣華康是第一家將中文字拆成筆劃 Stroke 儲存,再在輸出時進行實時重組的字型開發公司。

mingliu1
兩者主要分是前者是印刷術 Typography 所謂無襯線 Sans 類字體,指筆劃起始至收結都是平順,後者是指筆劃起始至收結以襯線加重了,造成類似書法的起角漂亮效果,但是這漂亮效果不適合於在字體小時顯示。英語世界最出名的 Sans 字體是 Helvetica (亦即是類似的 Arial) 而 Sans Serif 就是 Times Roman. 因為字體名稱是受版權保護的,由於要解決排版兼容問題,不同的字體廠商會設計相似的字體,但配以不同的字體名稱。

何謂粗體

明體 (或內地稱為宋體) 是以前中國刻版印刷最常用字體,橫劃和豎劃比例一般為 1 比 2,當比例變大,如橫豎比為 1 比 3 時被冠名為粗明體。黑體本身是橫直比例一致,當筆劃加粗後被冠名為粗黑體。
jhenghei-bold
視窗繁體版差不多十五年後才推出新的系統字體。部份原因當然因為繁體市場太細而那過去十五年微軟差不多是做獨市生意。另外的原因是做一套字的工程浩大。繁簡加起來是兩萬多字,除了每個字獨立出現時要美觀外,更多是考慮排版時的整體美觀性,所以需要對整套字覆修正,又要兼顧小字時是否清楚,更不用說如果要多幾個粗度 Weight, 變成幼體或粗體。

內文字體

幾十年前印刷排版 (字粒年代) 都喜歡用明體作內文字體,直到上世紀八十年代 Desktop Publishing 興起印刷革命, 印刷技術大幅改進,報紙排版輸出到達解像度 1200 dpi, 開始有人更廣泛使用黑體作內文字,最出名是當年香港信報。內文字除了要求小字時要顯示清楚 (所以正常情況不會使用粗體字),用什麽字體作內文很多時後是一種文化上的約定俗成,如幾十年前中文印刷多採用明體,隨著互聯網普及,更多採用黑體,但換了是日本,普遍採用的是圓體,圓體據說源自寫研(しゃけん)株式會社的創作。

round
例如,我的 Au Lsai LG24 手機標準系統字體是圓體,並且中港台常見是黑體。

外框字 Outline Font 和點陣字 Bitmap Font

電腦上顯示文字其實都是一個一個的點陣 Bitmap,最初幾十年前解像度低時,例如在 96dpi 輸出時,一般字體是 24 x 24 點陣, 就是 1/4 吋高。細看下你可以看到屏幕上字的每一個點。今天我用的手機是 300 dpi 以上, 同樣 1/4 吋高的字中包含了 75 x 75 點以上,你再不能分辨其中的每一個點。

bitmap

但技術是隨時間進步,並非一步登天,在低解像度的年代要在 24×24 點陣內清楚顯示“魚”字已不容易,更莫說是更複雜的字如“鱸”。所以當時的做法是每套字體要配應不同的點陣,例如 16×16, 24×24, 32×32, 48×48, 72×72, 當程式要求的大小不在預設範圍內時只能找最接近的點陣放大或縮小, 例如要 28×28 時利用 24×24 放大或 利用 32×32 縮小。效果當然不理想但亦是無可奈何的做法。

後來 Adobe 發明了外框字體 Outline font 技術,每個字體以一連串數學公式表達,再通過實時呈現將外框轉成點陣,從此當應用程式要大字時,例如 128×128 點,無需以下級點陣放大而直接由外框輸出,達到筆劃平順。

outline-sample

當小字時如果直接由外框通過實時呈現輸出,筆劃會擠在一起,Adobe 的做法是引入 Hinting 技術, 就是 Adobe Type 1 Font 技術, 後來的 Truetype 就是 Apple 為了不被 Adobe 這項專利技術鎖死而獨立開發的相類似技術,原先是用於屏幕顯示,慢慢結合桌面電腦日趨強大的運算功能,最後最代 Adobe Type 1 的地位。

中文外框字容量問題

中文外框字的缺點是容量大,一套字體動輒 10MB. 這在今天算不了什麽,但在 20 年前普遍硬盤只有 20 MB 時就不得了。所以當交換文件時,如果收件人系統內沒有發件人的字體,系統就會以默認字體取代顯示。在互聯網時代,瀏覽器會跟據網頁要求的字體儘量配合顯示,例如如果設定使用微軟正黑體,在 Windows XP 或 Mac 機上由於沒有微軟正黑體,瀏覽器會嘗試最匹配的字型(就是其他黑體),如果都沒有找到,就用默認系統字體,如在 XP 上是新細明體。這就是我們所說的字體替換 Font substitution。

由於字型名稱是多語言,在繁體名為微軟正黑體在英文視窗下的名字是 Microsoft Jhenghei. 所以在 CSS 中我們應該利用 font-family 設定字體替換的順序時輸入字型的中英文名。謎米 News 是方法有問題,因為它的樣式 Stylesheet 表僅包含英文字體,中文顯示時讓瀏覽器和機器自由隨意替換的字體。在我的情況下,抓住一個不好的新細明體字體!

meme-css

當然,在移動設備中,這不是一個問題,因為大多數移動裝置只配備了谷歌黑體。

(轉自互聯網)

Post a comment

 

Loading...