延迟 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>