Html 在网页上以非阻塞方式调用URL 故事时间

我有一个购买/租用的字体，其许可证要求我在每次显示该字体时查询其域上的唯一计数器。遗憾的是，他们的建议是在CSS文件中使用

import

调用它，这会在调用期间阻止渲染。这也很奇怪，因为根据许可证，如果有问题的CSS文件被缓存，他们还希望跟踪单个页面的浏览量，这难道不会阻止在缓存清除之前再次调用导入吗

无论如何，我删除了

import

调用，但随后开始思考究竟应该用什么替换它。什么标签会给我一个非阻塞调用，它可以跨浏览器普遍工作，并且不考虑禁用的特性？带有

rel=prefetch

的链接？HTML5，当我测试它时，它在IE7中不起作用。而且它也会感到尴尬，因为它意味着应该缓存资源，而响应包含

No Cache

指令。在页面末尾有

defer

和

async

属性的脚本标记？也许吧，但是如果有人禁用了脚本呢？我可以添加一个

noscript

标记，然后在其中添加一个图像标记作为后备。但是由于图像内容是空字符串，因此对于某些浏览器，图像是否会显示为断开？如果有人禁用了脚本和图像怎么办？哦，不！我必须承认，世界对他们来说一定是一个相当荒凉的地方。哦，哦！那么

embed/object

呢？现在那是错的，别逗我了

现在，我只使用了一个普通的图像标签，但覆盖最广泛边缘情况的神奇组合是什么呢？例如，我可以添加

脚本

标记来支持那些没有加载图像的脚本

我在这里的兴趣纯粹是科学的，所以我不是真的在寻找替代的字体提供者，也不是在讨论前面描述的情况有多不可能。此外，我无法理解为什么他们向我提供从我自己的服务器提供的实际字体文件，然后信任我诚实地打电话给柜台

密码 让我们想象一下，我的唯一字体计数器位于，font.foo服务器运行缓慢

---

起点

//font.css
@导入url（'font.foo/bar'）
@字体面{…}
//index.html

---

独立链接标签

//问题：块渲染
//index.html

---

rel=预取

//问题：无法在IE7中加载，语义上有问题
//index.html

---

延迟异步脚本加载

//问题：当用户禁用脚本时无法工作
//index.html

---

添加图像回退的脚本标记

//问题：当用户禁用脚本和图像时，该问题将不起作用
//index.html

可以这样混合吗？ 您有脚本选项，并继续使用link元素而不是img

    <script src="font.foo/bar" async defer>
    <noscript><link rel="stylesheet" href="font.foo/bar"></noscript>
</body>

，为什么不起作用？发布一些代码。多尼斯！在每次迭代中添加的代码片段和问题

在

中无效，无论如何也不适用于rel。使用itemprop属性是的，但这是HTML5，因此在较旧的浏览器中不起作用，而且它在语义上是错误的。您没有声明您正在搜索语义纯度，并且旧（和当前）浏览器将从您告诉他们的任何位置加载样式表，无论规格如何。这一点很好。我忘了给你回电话了，但我想我最后用了一个CSS隐藏图像。在这种情况下，如果浏览器确实加载了链接标签，那么链接标签也是一个不错的选择。

// Problem: Blocks rendering
// index.html
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="font.foo/bar">

// Problem: Won't load in IE7, semantically awkward
// index.html
<link rel="prefetch" href="font.foo/bar">

// Problem: Won't work when user has disabled scripting
// index.html
    <script src="font.foo/bar" async defer>
</body>

// Problem: Won't work when user has disabled scripting AND images
// index.html
    <script src="font.foo/bar" async defer>
    <noscript><img src="font.foo/bar" alt=""></noscript>
</body>

    <script src="font.foo/bar" async defer>
    <noscript><link rel="stylesheet" href="font.foo/bar"></noscript>
</body>