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>

延迟div可见性，直到字体加载完毕

1 个答案: