網頁字體有沒有真的用上,我們試過三種驗法。前兩種都騙過我們。
第一種:問字體 API
瀏覽器有提供介面,可以問某個字體現在能不能用。
它回答的是:這個字體有沒有被解析、檔案下載完了沒。它不回答畫面上這段字是不是用這支字畫的。
字體檔下載成功,但裡面沒有你要的那些字,它照樣回答可以用。
第二種:量文字寬度
比較字體套上前後的文字寬度,有變就表示換了字體。
可是換成回退字體,寬度也會變。量到的只能證明換了一支字,不能證明換成了你要的那一支。
要是目標字體跟系統預設的寬度差不多,差值會小到跟誤差分不開。
第三種:畫出來比像素
同一段字,用兩種設定各畫一次到 canvas 上,然後比較像素:
- 一次用目標字體
- 一次用一個確定不存在的字體名稱,逼瀏覽器退回系統預設
兩張圖完全一樣,代表目標字體沒有用上。不一樣,才代表用上了。
這個方法不用相信任何一層的回報,它看的就是最後畫出來的東西。
我們現在驗收時,盡量貼近最後呈現的那一層去看。前面每一層的回報,都只能證明自己那一段做完了。


