網頁字體有沒有真的用上,有三種驗法。前兩種都會說謊。

第一種:問字體 API

瀏覽器提供介面可以問「這個字體現在可用嗎」。

它的回答是「這個字體描述有沒有被解析、資源有沒有下載完成」。不是「畫面上這一段字是不是用它畫的」。

字體檔下載成功、但缺少你要的那些字元 —— 回答仍然是可用。

第二種:量文字寬度

比較「掛上字體前」跟「掛上字體後」的寬度,有變化就代表換了。

問題是回退字體也會讓寬度改變。你量到的是「換了一支字」,不是「換成了你要的那一支」。

而且如果你的字體跟系統預設剛好寬度接近,差值會落在雜訊裡。

第三種:畫出來比像素

把同一段文字用兩種設定各畫一次到畫布上,比較像素。

  • 一次用目標字體
  • 一次用一個確定不存在的字體名(強制回退到系統預設)

兩張圖完全相同 = 目標字體沒有用上。不同 = 用上了。

這個方法不需要相信任何一層的回報,它直接看最後的結果。

一般化

⭐ 驗收要盡量靠近最終呈現的那一層。

中間每一層的回報都只證明它自己那一段做完了。而故障最常發生的位置,就是兩層之間沒有人負責的那個縫。