如何在页面准备好之前通过 javascript 加载外部字体答案

【问题标题】：How to load external fonts via javascript before page ready如何在页面准备好之前通过 javascript 加载外部字体
【发布时间】：2016-11-13 07:28:36
【问题描述】：

我在我的网站上使用 typekit 来加载字体，typekit 给了我 2 个链接。

<script src="https://use.typekit.net/xxxx.js"></script>
<script>try { Typekit.load({ async: false }); } catch (e) { }</script>

我将这些链接放在 head 标记中，但是当我输入我的网站时，字体会在内容之后加载。我想知道如何在页面准备好或内容加载之前加载它。

PS：我试过 async: true and false.. 他们都给出了相同的结果。

【问题讨论】：

字体链接和<head>之间还有其他的线吗？这可能会导致问题。
没有。我按照你下面说的尝试了
能否请您提供<head> 元素中的所有代码？一个活生生的例子也有助于帮助你。
我是这样使用的： *@ ..... ....

标签： javascript fonts webfonts typekit

【解决方案1】：

您可以使用 Font Evens 在字体加载时隐藏内容。 https://helpx.adobe.com/typekit/using/font-events.html

【讨论】：

我想这是唯一的方法，但我不喜欢它，但我想我会这样使用 css。 .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading p, .wf-loading span, .wf-loading a, .wf-loading button, .wf-loading input[type=提交]{可见性：隐藏； }
您还可以实现加载屏幕。从用户体验的角度来看，它有点烦人，但看起来更好。
是的，你是对的，但我希望这是在内容加载之前通过 js 下载字体的解决方案。非常感谢大家的帮助

【解决方案2】：

如果简单地将字体链接放到<head> 不起作用，您可以尝试window.onpaint。

<head>
    <script src="https://use.typekit.net/xxxx.js"></script>
</head>

那么;

<script type="text/javascript">
    function preloadFunc()
    {
        try { Typekit.load({ async: false }); } catch (e) { }
    }
    window.onpaint = preloadFunc();
</script>

【讨论】：