直到字体加载完成后延迟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>