如何验证谷歌网络字体是否正常工作？

Question

我修改了试图加载三种谷歌字体的其他人的代码。

他们有3个css文件。每个css文件都使用了谷歌网络字体中的一种css字体。在chrome dev工具中，我看到只有一种字体可以工作，而其他2种字体没有。

它发生了，因为只有一个可以应用所以chrome试图下载一个。当他们更改下拉列表选择更改时的字体时，它不起作用，因为甚至没有在chrome中加载字体。

因为我想在更改下拉列表时加载字体，所以我写了这段代码：

<div id="hiddenFontLoader"></div>

的 CSS： 的

#hiddenFontLoader {
    font-family: 'Quicksand', 'Cantarell';
    display: none;
}

此代码可以帮助我加载其他2种无处使用的字体，并在下拉列表更改时使用。

现在我想证明它有效。对我来说，我可以将字体设置为400％并且可以检查它是否正常工作。

测试字体的正确方法是什么，是否加载。我的意思是如果我使用后备字体然后我无法检查所有字体是否有非常小的差异和后备字体非常类似于我从谷歌字体加载的字体。

假设我应用于身体{}然后如何确认它在chrome dev工具或firebug中的工作。

任何人都有技巧。

Answer 1

您应该考虑使用Google WebFont Loader。 文档非常详尽。具体来说，请查看Acting on Events。

https://developers.google.com/webfonts/docs/webfont_loader

我相信您正在寻找active event (Click Here!)。