直到字體加載完成後延遲div可見性

Question

如何確定字體是否已完成加載？

我可以使用this question的想法來延遲顯示有問題的div，但是我怎麼知道字體何時可用？

我希望延遲顯示一個div，直到使用的字體完成加載。

The current effect is that the words display in font A, then abruptly change into font B. 

jsFiddle demo (of the undesirable effect)

Answer 1

你可以只等待整個頁面加載：的

$(window).bind("load", function() { 
 
     $('.container').show(); 
 
});

@import url(http://fonts.googleapis.com/css?family=Orbitron:700); 
 
@import url(http://fonts.googleapis.com/css?family=Lobster:400); 
 
@import url(http://fonts.googleapis.com/css?family=Indie+Flower:400); 
 
@import url(http://fonts.googleapis.com/css?family=Oswald:400); 
 
div{font-family:'Segoe UI Light';font-size:3em;} 
 

 
.container { /*container is hidden by default*/ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> <!--Wrap everything in a container--> 
 
    <div id="a1">This Is Line One</div> 
 
    <div id="a2">this is line two</div> 
 
    <div id="a3">THIS IS LINE THREE</div> 
 
    <div id="a4">this is line four</div> 
 
</div>