先考慮讀者

在香港雙語網站,字體選擇會影響顧客能否看清價格、日期、資格及操作指示。設計稿上的漂亮字樣,不能證明真實手機畫面會及時顯示文字,也不能證明後備字體出現後,結帳按鈕不會移位。先列出顧客必須閱讀的內容,例如商品名稱、細則、欄位標籤、錯誤訊息及確認內容。英文樣本不足以驗證繁體中文字形是否齊全,亦看不出缺字時會換成哪種字體。驗收目標應簡單明確:自訂字體延遲或失效時,兩種語言仍可閱讀,版面亦不會移動至妨礙操作。這是使用體驗的判準,不代表某個設定必然取得指定效能分數。

盤點實際字體檔

請工程人員列出正式網站真正要求下載的字體檔,而非只看品牌手冊內的字體名稱。逐一記錄字族、粗幼、斜體、檔案格式、語言子集,以及在哪些頁面使用。正文和粗體標題可能需要不同檔案;未打算使用的斜體若被樣式規則引用,也可能增加下載。Google 的字體效能指引指出,包含大量字形與樣式的完整字體檔可以很大,而字體宣告及 Unicode 範圍可讓瀏覽器選取需要的資源。因此應先刪去不用的字重和檔案,再討論加快下載。字體授權及自行託管條款須另行核實;效能文件不等於使用許可。設計及工程團隊應共用同一份實際檔案清單。

決定哪些內容需要自訂字體

中小企不一定要讓每個符號、每段正文都使用同一款自訂字體。可把品牌識別較重要的標題,與以閱讀清晰為主的正文分開考慮。標題若確有需要,可只載入一個字體檔;正文則可能適合穩定的系統字體組合。繁體中文所需字形往往比短英文標題多,測試時要使用真實文章、地址及商品名稱,不應只輸入幾個展示字。若子集欠缺字形,同一行可能混用不同字體;應一起查看標點、數字、英文詞彙和中文。把字體決定交給內容團隊,日後新增少見字或活動名稱時,便有人能檢查字形涵蓋及後備顯示情況。

選擇文字顯示方式

font-display 描述符會影響網頁字體尚未取得時,瀏覽器如何顯示文字。後備字體可以讓文字先出現,但稍後切換可能改變換行;等待網頁字體則可能保持指定外觀,卻令顧客較遲看到內容。兩者取捨須在實際頁面觀察。Google 的指引同時討論字體顯示方式及提早載入,並指出提早載入不保證字體能在首次繪畫前到達。對表格、細則及操作指示,應優先確保文字及時可讀,再檢查品牌外觀。不要把設定名稱當作驗收證據;首次瀏覽、再次瀏覽及字體請求失敗,可能呈現不同過程。

認真設計後備字體

後備字體應是設計系統的一部分,而非出錯時才臨時補上。盡量選擇字寬、行高及視覺粗幼相近的可用字體,再檢查兩種語言的實際換行。後備字體若較闊,價格可能落到下一行,商品卡片變高,主要按鈕亦可能被推離畫面;過窄字體則可能令密集的中文細則難以閱讀。測試長商品名稱、英中混合地址、大數字及錯誤摘要。文字和控制項周圍要預留合理空間,避免正常字體切換造成裁切。若版面仍明顯移動,應調整尺寸或字體選擇,不宜藉着隱藏內容等待指定字體。

只預載真正關鍵的檔案

預載可讓已知的字體請求較早開始,但每個優先請求都會與其他重要資源爭用網絡容量。Google 現行字體建議提醒開發者審慎選擇預載。應先找出某類頁面首屏文字真正需要的字體,核對網址、格式及 CSS 宣告,然後查看網絡載入次序。首頁與商品頁若用不同字體,在共用頁首一律預載,便可能浪費流量;中英文頁面亦可能需要不同字形子集。先觀察沒有額外預載時的瓶頸,再加入最小的必要請求作比較。如出現重複下載,或拖慢主要圖片,應修正或撤回設定。這是根據實測作出的工程判斷,並非通用口訣。

讓子集符合內容

字形子集必須配合顧客真正看到的內容,才有實際價值。只含拉丁字母的檔案或足以處理英文導覽,卻無法涵蓋所有繁體中文商品名稱;反過來說,為一行裝飾性中文標題,讓每位訪客下載完整大型字體,也未必合理。用真實頁面文字,以及常見姓名、標點、單位和符號測試涵蓋範圍。若評價或地址出現少見字,還要觀察顯示結果。瀏覽器自動選用後備字體,技術上雖可行,外觀仍可能不協調。若內容團隊經常加入新字,便應建立可重做的子集製作和抽查流程,不宜把一次性的字形清單當作永久答案。

執行雙語實測

可選一個英文商品頁及一個結構相近的繁體中文頁,再加入長文章和表格作測試。在手機闊度下清除瀏覽器快取,記錄標題、價格及控制項何時變得可讀。接着模擬較慢連線,並封鎖字體請求重試。留意標題、價格、主要操作及錯誤位置有否換行、移動或裁切;若變化不易描述,可錄製短片。再次瀏覽須分開測試,因為快取可能掩蓋首次進站問題。目的在比較顧客任務,不是虛構改善百分比。記錄裝置、瀏覽器、頁面、語言、網絡條件與實際觀察,再以此作上線判斷。

以一個情境作決定

假設網店英文首頁外觀完整,但中文商品頁因大型自訂字體下載,標題位置暫時空白。設計師提出預載所有字體。較有用的檢查,是先找出首屏中文標題使用哪個檔案,以及正文是否已有可讀的後備字體。移除不用的字重,設定清晰的顯示方式,再比較系統字體正文與自訂字體正文。若標題仍遲出現,才於該類頁面測試針對性預載。若文字已可見但購買按鈕跳動,便檢查後備字體尺寸及卡片空間。只有兩種語言在測試條件下仍可正常使用,才把結果及錄影納入上線紀錄。這只是示例,並非真實店舖的效能數據。

上線後指定負責人

新活動頁、翻譯或內容管理範本加入另一字體後,原有載入表現可能改變。應把正式使用的檔案、後備字體組合及關鍵預載項目寫入簡短上線紀錄。設計人員負責可讀性,工程人員負責載入及部署,內容團隊則留意新字形需求。更新字體、主題或大幅增加中文內容後,重新抽查代表頁面。顧客若回報方框、缺字或按鈕跳動,先記下確實網址、裝置及文字,再決定是否全站修改。局部內容錯誤與字體請求失敗,修正方法可能不同。長遠做法是維持精簡、可測試,而且與真實顧客流程相連的字體系統。

上線前檢查

  • 讀者能否在實際頁面及慢速連線下完成決定?
  • 團隊有否測試例外情況,並記錄修正負責人?

資料來源及延伸閱讀