如何首先显示页面然后加载自定义字体？

Question

我有一个时间敏感的网页，我希望它在加载任何自定义字体之前首先显示页面。换句话说，首先会显示页面，就像没有加载字体一样。

这意味着自定义字体（如果由浏览器缓存）仅在用户第二次及以后访问该页面时使用。

我试过了：

<style>
@font-face {
    font-family: 'FontName'; 
    src: url('http://domain.com/fonts/font.ttf');
}
</style>

但它不会后加载字体。这意味着页面加载会延迟。

在没有Javascript 的情况下实现此功能可能有什么解决方案/黑客？

Answer 1

  

如果没有Javascript，可以使用哪些解决方案来实现此功能？

不可能。您无法加载整页，然后加载字体，而字体是整页的一部分。这与自身相矛盾。

使用javascript，你可以更改页面，这样就可以有一整页，然后让它更“饱满”。

Answer 2

这是一个艰难的...但这里有一个开箱即用的kludgy想法...不知道它是否有效，它可能会被投票。 ：

使用几乎相同的2页：

1. 加载页面'A'，除了使用自定义字体使用内联样式渲染的最底部的一些文本外，不使用自定义字体。希望这能让浏览器有机会缓存​​字体。

2. 重定向没有js（元刷新？）到页面'B'，除了应用的缓存字体外，它具有相同的内容。

但是，如果没有js，我无法想出一种正确计时的方法，因此你陷入了竞争状态。