數字要對齊,所以我們給那一整行掛了等寬字體。那一行裡有中文。

結果是:數字對齊了,中文換成了一支我們沒有選過的字。

字體回退是無聲的

瀏覽器拿到一個字元,去指定的字體裡找。找不到就往後找下一支。全都找不到就用系統預設。

整個過程沒有任何警告。 沒有主控台訊息、沒有錯誤、沒有紅字。畫面上只是「這一行的中文看起來跟別的地方有點不一樣」。

而在設計稿裡那一行通常是數字,所以審稿的時候看不出來。

兩個延伸的坑

① 把中文字體排在等寬字後面,不會回退到你排的那一支。 回退是逐字元的,但在同一個字體堆疊裡,中文字元會一路掉到系統預設,不會停在你以為的那一支 —— 除非你明確指定。含中文的標籤一律直接指名要用的字體,不要靠堆疊。

② 常見的免費字體服務不見得有你要的那一套中文版本。 把它跟英文版本寫在同一個請求裡,服務會安靜地只給你有的那一個。請求成功、狀態碼 200、少了一半。

做法

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

驗收不要問字體 API「載入了嗎」—— 它回答的是「我試過了」,不是「用上了」。畫一次到畫布上,比較像素。 兩支不同的字畫出來的同一個字,像素一定不同。