Question

故事时间

我有一个购买/租用的字体，其许可证要求我在每次显示字体时查询其域上的唯一计数器。可悲的是，他们的建议是在import的CSS文件中调用它，它会在调用期间阻止呈现。这也很奇怪，因为根据他们希望跟踪单个页面浏览的许可证，如果有问题的CSS文件被缓存，是否会阻止在缓存清除之前再次调用导入？

无论如何，我删除了import电话，但后来开始思考应该用什么来替换它。什么标签会给我一个非阻塞的调用，它可以在浏览器中普遍使用，无论是否禁用了哪些功能？与rel=prefetch的链接？ HTML5，当我测试它时它在IE7中不起作用。它也会感到尴尬，因为它意味着资源应该被缓存，但响应包含No-Cache指令。页面末尾带有defer和async属性的脚本代码？也许吧，但是如果有人禁用了脚本呢？我可以添加noscript标记，然后在其中添加图片标记作为后备广告。但！由于图像内容是空字符串，因此某些浏览器的图像是否会显示为已损坏？如果有人禁用脚本和图像怎么办？不好了！我必须承认，世界对他们来说一定是一个非常暗淡的地方。哦，哦！那么embed/object呢？现在这是错的，别再对我说好笑了。

我现在最终只使用了一个普通的图像标签，但是那种能够覆盖最广泛的边缘情况的神奇组合是什么？我可以添加script标记，以支持那些没有加载图像的文件。

我的阴谋纯粹是科学的，所以我并不是在寻找替代字体提供者，也不是在讨论之前描述的情况。另外，为什么他们向我提供了从我自己的服务器上提供的实际字体文件，然后相信我诚实地打电话给我的电脑是我的。

代码

让我们假设我的唯一字体计数器位于http://font.foo/bar，而font.foo服务器的运行速度很慢。

起点

// fonts.css
@import url('font.foo/bar')
@font-face { ... }

// index.html
<link rel="stylesheet" href="fonts.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>

Answer 1

看看这篇关于加载第三方内容异步的文章，这样它就可以吸引你的网页。

http://css-tricks.com/thinking-async/

Answer 2

也许这样混合？您有脚本选项并继续使用链接元素而不是img

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

在网页上以非阻塞方式调用URL

故事时间

代码

2 个答案: