typekit+思源黑體

最近發現typekit的免費帳號可以把美美的思源黑體加在網站上,來玩一下。

方法很簡單,就是新增一個kit把要的字型加進去,然後把一小段程式碼加到表尾,再把字型 “source-han-sans-traditional” 加到樣式表就完成了。弄完後本來很開心,但隔天換了個電腦就發現網頁速度變得無法忍受地慢,才發現預設的程式碼如果沒有完全載入前會把其他的東西都擋掉所以凍結在那裡,此時改用網站上提供的另一段非同步載入的程式碼就不會有這個問題了。

不過,改完之後又發現另一個問題,就是網頁載入時會有一種跳動感,就是會先出現預設字體的字,然後過幾秒後才又刷地變成另外一種字體,然後搜尋了一下相關的討論才知道這就是該程式碼下面附帶的文字說明的,專有名詞叫做FOUT(Flash of Unstyled Text)的問題,需要手動調整樣式表,加入.wf-loading, .wf-active, .wf-active等屬性,讓網頁文字在程式碼尚未完全載入前先隱藏起來,如果3秒鐘後沒有載入完全就會用別的字型顯示。

但即使是這樣還是覺得有點慢,到最後就只載入一個6k的字型樣式,稍微還是有點慢,但因為此事折騰我太久了,現在速度好像還在可忍受的範圍就先擱在這兒。