為了讓數字對齊,我們替那一整行設了等寬字體。那一行裡有中文。

數字是對齊了。中文則換成了一支我們從來沒選過的字。從來沒選過。

字體回退不出聲

瀏覽器拿到一個字,會先去指定的字體裡找。找不到,就往字體清單的下一支找。下一支也找不到,就用系統預設的字。

整個過程沒有任何提示。主控台沒有訊息,也沒有錯誤。畫面上只是那一行的中文,看起來跟其他地方有點不一樣。

設計稿上那一行通常只放數字,所以審稿的時候看不出來。

另外兩個坑

把中文字體排在等寬字體後面,也不一定會用到它。中文字可能一路掉到系統預設,停不在你排的那一支。含中文的標籤,我們現在都直接指定要用哪一支字,不靠字體清單的順序。

另一個是免費字體服務。不是每一套字都有你要的中文版本,如果跟英文版寫在同一個請求裡,服務只會給你它有的那一個,不會說少了什麼。請求成功,狀態碼 200,字少了一半。

現在的做法

需要等寬的只包住數字那一段,不包整行。

驗收時也不問字體 API 載入了沒。它的「載入了」只代表試過了,不代表畫面真的用上。我們把字畫到 canvas 上比像素:不同的兩支字畫同一個字,像素一定不一樣。