我已经修改了尝试加载三种谷歌字体的其他人的代码。
他们有 3 个 css 文件。每个 css 文件都使用了 google web fonts 中的一种 css 字体。在 chrome 开发工具中,我只看到一种字体有效,而另两种无效。
发生这种情况是因为只有一个可以应用,所以 chrome 试图下载一个。当他们更改下拉选择更改的字体时,它不起作用,因为字体甚至没有在 chrome 中加载。
因为我想在他们更改下拉列表时加载字体,所以我编写了以下代码:
<div id="hiddenFontLoader"></div>
CSS:
#hiddenFontLoader {
font-family: 'Quicksand', 'Cantarell';
display: none;
}
此代码帮助我加载其他 2 种无处使用的字体,并将在下拉更改时使用。
现在我想证明它是有效的。对我来说,我可以将字体设置为 400% 并且可以检查它是否有效。
测试字体是否加载的正确方法是什么。我的意思是如果我使用后备字体,那么我无法检查所有字体是否有非常小的差异,并且后备字体与我从谷歌字体加载的字体非常相似。
假设我申请了 body{} 那么如何确认它在 chrome 开发工具或 firebug 中工作。
任何人都有诀窍。