确定是否已加载Google网络字体

Question

我正在构建一个网站，让用户可以选择要应用于文本的字体。我正在使用谷歌的网络字体。目前，当他们通过下拉选择字体时，我正在使用：

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

这很有效。我的问题是：

• 如果用户多次选择相同的字体（在同一会话中） 那个字体加载了两次吗？
• 如果是这样，有办法确定字体X是否已经存在 加载，以免重新加载？

有很多，我认为我不想将它们全部预加载，只是在选中时。

Answer 1

用户的浏览器应该在不做任何额外操作的情况下缓存字体。

由于该字体位于谷歌的服务器中，因此谷歌与您的用户之间会进行缓存协商。换句话说，你甚至无法控制它。

因此，第二次追加相同，不应该导致用户浏览器再次加载它。当然，除非用户在浏览器上禁用了缓存。

Answer 2

该字体应由浏览器缓存，请参阅https://developers.google.com/webfonts/faq#Many_Fonts_Per_Page