如何在頁面準備之前通過javascript加載外部字體

我在我的網站上使用typekit加載字體和typekit給了我2個鏈接。如何在頁面準備之前通過javascript加載外部字體

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

我把這些鏈接放在head標籤中，但是當我進入我的網站時，字體被加載後的內容。我想知道如何在頁面準備好之前或內容加載之前加載它。

PS：我試過async：true和false ..他們都給出了相同的結果。

來源

2016-07-11 Tolga Kısaoğulları

字體鏈接和''之間是否還有其他的行？這可能會導致問題。 –

不，我按照下面的說法試過 –

您能否提供您的''元素中的所有代碼？現場示例也會幫助你。 –

您可以使用的一件事是Font Evens在字體加載時隱藏內容。 https://helpx.adobe.com/typekit/using/font-events.html

來源

2016-07-11 11:28:48 exabyssus

我想這是唯一的辦法，但我不喜歡它，但我想我會用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 = submit] { visibibility：hidden; } –

你也可以實現一個加載屏幕。從UX的角度來看，這有點煩人，但看起來更好。 – exabyssus

是的，你是對的，但我希望它是一種解決方案，字體在內容加載之前通過js下載。非常感謝大家的幫助 –

如果簡單地將字體鏈接放到<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>

來源

2016-07-11 11:36:01

我試過了，但沒有奏效 –

如何在頁面準備之前通過javascript加載外部字體

回答

相關問題