主頁 / 網站制作教學 / 網站中文字體問題 – 細說原由,為何網頁無法顯示不同的中文字體?

網站中文字體問題 – 細說原由,為何網頁無法顯示不同的中文字體?

網站中文字體並不像英語字體有麼那多選擇。中文網站最常犯的錯誤就是用錯中文字體。以下例子比較兩個網站,一個是 BBC News 中文網站,一個是本土謎米 News 網站。平台是 Windows 8.1 英文版上執行 Chrome 瀏覽器,當兩者並排比較,你很容易發現 BBC News 中文容易閱讀得多,主要原因是字體。充分說明這個問題,我們需要談些歷史。

中文編碼問題

電腦儲存數據以字元 Byte 為單位。每個字元值有 256 個變化,足夠代表英語系中的不同字母。電腦系統中文化始於上世紀八十年化初。最初是臺灣人在英語操作系統上僭建出來 (不是中國大陸大陸那時大陸文革剛完,一窮二白,百廢待興,兼且歐美國家對共産國家實施科技出口限制),利用兩個字元代表一個中文字。因為第1個字元的第1位被設置為1作為中國字符主導字節,理論上二字元代碼可以代表 32767 個不同中文字。那個二字元代碼代表那一個中文字就是所為編碼 Encoding,出名的中文編碼有 Big5, CNS11643。日本韓國大陸都先後採用類似方法擴展英文電腦支援日文韓文簡體中文。問題是這同一個兩字元代碼在不同語文操作系統上代表不同字型。資料交換會引起問題。統一碼 Unicode 在上世紀九十年代提出就是為以解決語言間兼容問題,統一碼對於每個不同的字形 Glyph 分配一個唯一的代碼。隨著千禧年後新操作電腦及移動設備都兼容統一碼。語文兼容問題徹底解決。隨著統一碼的普及,互聯網亦進化成可以支援統一碼。如果網頁內容是支援統一碼。頁內的描述是:<meta charset=”UTF-8″ />

網站中文字體

網站中文字體問題

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

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

微軟正黑體

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

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

何謂粗體

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

內文字體

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

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

外框字 Outline Font 和點陣字 Bitmap Font

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

點陣字

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

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

外框字

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

中文外框字容量問題

中文外框字的缺點是容量大,一套字體動輒 10MB. 這在今天算不了什麽,但在 20 年前普遍硬盤只有 20 MB 時就不得了。所以當交換文件時,如果收件人系統內沒有發件人的字體,系統就會以默認字體取代顯示。

字體替換 Font Substitution

桌面印刷始於上世紀八十年化。由於印刷排版系統需要不同字體,而字體是要付錢授權,所以當一份文件在另一台電腦打開時,有可能原來文件中要求的字體在這台電腦中沒有,與其將段文字留空,一個更好的做法是自動在電腦中找最適合的字體代替。在互聯網時代,瀏覽器會跟據網頁要求的字體儘量配合顯示,例如如果設定使用微軟正黑體,在 Windows XP 或 Mac 機上由於沒有微軟正黑體,瀏覽器會嘗試最匹配的字型(就是其他黑體),如果都沒有找到,就用默認系統字體,如在 XP 上是新細明體。這就是我們所說的字體替換 Font Substitution。問題是文件的外藐跟原來的不一樣。

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

meme-css

字體替換是以編碼操作。比如 CSS 中是:

font- family:”Avant Garde”, “Microsoft Jhenghei”, sans;

英文會以 Avant Garde 顯示,中文時,由於 Avant Garde 不支援中文編碼,依次找 Microsoft Jhenghei, 中文顯示以微軟正黑體。但如果 CSS 是:

font- family:”Microsoft Jhenghei”, “Avant Garde”, sans;

由於 Microsoft Jhenghei 中亦技援英語編碼,中英文都會以微軟正黑體顯示。

WebFont

而英語世界提出的解決字體替換問題方案就是免費的 WebFont. WebFont 是存在互聯網伺服器。網頁文件會指示出 WebFont 存在的伺服器域名。當瀏覽器解讀網頁文件時發現電腦中缺乏字體時可連接到 WebFont 伺服器下載使用。

但 WebFont 不是解決中文字不存在的有效方法。理由是:一) 中文字體動輒是萬多個字。一套字體隨時 10 MB,下載需時。二) 中文字體開發投入資源龐大,免費下載差不多可能,授權費用很難操作。有一些技術是將網頁中所需的字元 (不是整套字體) 變成 Javascript 算式下載。做法是解決了中文字體下載量大的問題,但亦引起了其他問題,例如算式內容不利搜尋引擎優化

了解更多網頁設計

[初稿發佈於 2014 年 11月15日]
摘要
網站中文字體問題 - 細說原由,為何網頁無法顯示不同的中文字體?
文章名稱
網站中文字體問題 - 細說原由,為何網頁無法顯示不同的中文字體?
描述
網站中文字體並不像英語字體有麼那多選擇。中文網站最常犯的錯誤就是用錯中文字體。正確使用字體會令讀者看時感覺更舒服,多瀏覽一些內容,停留多一點時間,對網站優化SEO排名亦有幫助。在互聯網時代,瀏覽器會跟據網頁要求的字體儘量配合顯示,如果都沒有找到,就用默認系統字體,如在 XP 上是新細明體。這就是我們所說的字體替換 Font substitution。
作者
發佈者名稱
Well Develop International Limited
發佈者商標
Facebook Comments

關於 WaiTing LI

香港SEO專家。專家地位並非紙上談兵自說自話而來,應該是基於由同業又或者權威的獨立第三方給予的評價。而SEO專家地位大致可以從 Google 給予你所競逐一大籃子競爭性高的關鍵字排名結果推斷出來。其他我關於宣傳推廣的文章亦取得很高排名。這方面搜尋引擎似乎亦給予我專家效應。

也查看

HTTPS 加密連線和免費 SSL 證書,更安全更利搜尋排名,加強購物信心。

 HTTPS 加密連線 以前一 …

發表迴響

支持我們!

如果你喜歡這個網站,請點擊以下按鈕支持我們!