網頁開發 網頁設計

解決使用 Google Font 雲端字型,造成「確認載入網站字型時文字不消失」的問題

2019/03/26

梅問題-解決使用Google雲端字型,造成「確認載入網站字型時文字不消失」的問題
  雖然透過CSS就可載入自己喜愛的字型檔,但礙於中文字的檔太大與版權問題,是無法公開載入字型的,因此若要讓網頁字型有不同的變化,就能使用雲端字型,而目前的雲端字型,都是依照瀏覽量付費,因此當流量愈大,相對要支付的費用也愈多,雖然目前Adobe與Google也有推出免費的雲端字型,而Adobe的免費版有流量限制,Google則是超佛心沒流量限制,但有使用過的朋友,應該會發現到,當把網頁載入Google雲端字型時,則會發現到,一開始載入網頁時,畫面會先空白,等文字載入完畢後,再一塊噴出來。

  甚至透過 Google PageSpeed Insights 進行網頁測速時,在診斷的地方,還會出現「確認載入網站字型時文字不會消失」,相信許多朋友看到這一條,應該是有看沒有懂,什麼是文字不會消失,同時這個文字載入的速度也無法控制,一切由載入雲端字型的主機控制的,除了Google雲端字型,就連載入IconFont也會發生一樣的情況,而到底要如何解決這個問題,其實方法很簡單,只需搭配CSS3的Font-Display屬性,就能解進這問題,甚至當網頁載入時,也不會一片白,當雲端字型載入時,再一一的作更換,讓網頁不卡卡啦!因此有使用雲端字型或是IconFont的朋友,也趕快來看看,要怎解決這問題吧!


Step1
首先,進入GoogleFonts後,選擇自己所需的字型。
梅問題-解決使用Google雲端字型,造成「確認載入網站字型時文字不消失」的問題
Step2
接著點選所選字型面板,再將STANDARD中的CSS連結拷貝起來。
梅問題-解決使用Google雲端字型,造成「確認載入網站字型時文字不消失」的問題
Step3
貼到瀏覽器的網址列後,再把裡面的文字全選並複製。
梅問題-解決使用Google雲端字型,造成「確認載入網站字型時文字不消失」的問題
Step4
貼到網頁編輯器後,將font-style:normal替換成font-display:swap
梅問題-解決使用Google雲端字型,造成「確認載入網站字型時文字不消失」的問題
Step5
替換好後,再把它貼到自己的CSS檔底下。
梅問題-解決使用Google雲端字型,造成「確認載入網站字型時文字不消失」的問題
Step6
接著再設定font-family。
梅問題-解決使用Google雲端字型,造成「確認載入網站字型時文字不消失」的問題
Step7
完成後,再重新載入網頁,這時文字一開始會先顯示,再依序的載入雲端字型並替換。
梅問題-解決使用Google雲端字型,造成「確認載入網站字型時文字不消失」的問題
Step8
這時再到Google PageSpeed Insights 檢測時,就會發現在診斷的地方,原來的文字不會消失的問題已解決啦!而搭配CSS3的swap屬性,真是超方便的啦!
梅問題-解決使用Google雲端字型,造成「確認載入網站字型時文字不消失」的問題