為了讓數字對齊,我們替那一整行設了等寬字體。那一行裡有中文。
數字是對齊了。中文則換成了一支我們從來沒選過的字。從來沒選過。
字體回退不出聲
瀏覽器拿到一個字,會先去指定的字體裡找。找不到,就往字體清單的下一支找。下一支也找不到,就用系統預設的字。
整個過程沒有任何提示。主控台沒有訊息,也沒有錯誤。畫面上只是那一行的中文,看起來跟其他地方有點不一樣。
設計稿上那一行通常只放數字,所以審稿的時候看不出來。
另外兩個坑
把中文字體排在等寬字體後面,也不一定會用到它。中文字可能一路掉到系統預設,停不在你排的那一支。含中文的標籤,我們現在都直接指定要用哪一支字,不靠字體清單的順序。
另一個是免費字體服務。不是每一套字都有你要的中文版本,如果跟英文版寫在同一個請求裡,服務只會給你它有的那一個,不會說少了什麼。請求成功,狀態碼 200,字少了一半。
現在的做法
需要等寬的只包住數字那一段,不包整行。
驗收時也不問字體 API 載入了沒。它的「載入了」只代表試過了,不代表畫面真的用上。我們把字畫到 canvas 上比像素:不同的兩支字畫同一個字,像素一定不一樣。


