確定Google網頁字體是否已經加載

Question

我正在構建一個網站，讓用戶選擇要應用於其文本的字體。我正在使用Google的網絡字體。目前當他們選擇字體通過下拉我正在使用：

$("head").append("<link href='https://fonts.googleapis.com/css?family=" + FontName + "' rel='stylesheet' type='text/css'>"); 

這很好。我的問題是：

• 如果用戶多次選擇同一字體（在同一會話中） 是該字體加載兩次？
• 如果是這樣，有沒有辦法確定字體X已經加載了 ，以免重新加載？

有很多，我不認爲我想要預先加載它們，只是選擇時。

Answer 1

字體應該由瀏覽器緩存，見https://developers.google.com/webfonts/faq#Many_Fonts_Per_Page

Answer 2

用戶的瀏覽器應該緩存的字體沒有你做任何額外的東西。

由於字體位於谷歌的服務器，緩存協商發生在谷歌和你的用戶之間。換句話說，你甚至無法控制它。

因此，第二次追加相同的內容不應導致用戶瀏覽器再次加載它。當然，除非用戶在其瀏覽器上禁用緩存。