该preload指令未按预期在Chrome中执行.下面是一个完整的HTML页面,可以在Chrome中打开以进行结果比较.它应该应用所有5种字体; 相反,它只应用第一个预加载的字体,为应该是第二个字符制作一个虚假斜体,并简单地用默认的衬线代替剩下的3个字体.
此外,在开发人员的控制台中,对于五种字体中的每一种,此消息在大约3秒后出现:
The resource [URL] was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
奇怪的是,它确实将第一个字体(Muli)应用于h1和h2标签(尽管为它制作了一个虚假的斜体h2); 您可以单击错误消息中的URL,并在开发人员的控制台中显示预加载字体的预览.
有什么问题在这里有什么不妥？(我在Windows 8.1专业版的Chrome 56上测试了这个.)
<!DOCTYPE html>
<html>
<head>
<title>Preload Font Test</title>
<link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/zscZFkjVRGyfQ_Pw-5exXPesZW2xOQ-xsNqO47m55DA.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/YxNEAWILjDc466nftZdqXuvvDin1pK8aKteLpeZ5c0A.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxv79_ZuUxCigM2DespTnFaw.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v13/tI4j516nok_GrVf4dhunkg.woff2" as="font" type="font/woff2" …