0

讲故事的时间

我有一个购买/租用的字体，其许可证要求我在每次显示字体时查询其域上的唯一计数器。遗憾的是，他们的建议是在 CSS 文件中使用 调用它import，这会在调用期间阻止渲染。这也很奇怪，因为根据许可证，他们希望跟踪单个页面视图，但是如果有问题的 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">

rel=预取

// 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>
4

1 回答 1

0

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

    <script src="font.foo/bar" async defer>
    <noscript><link rel="stylesheet" href="font.foo/bar"></noscript>
</body>
于 2013-09-23T21:30:48.383 回答