布局渲染后加载 Google Web 字体答案

【问题标题】：Google Web Fonts loading after layout has rendered布局渲染后加载 Google Web 字体
【发布时间】：2023-03-25 15:26:01
【问题描述】：

我的页面上有一个脚本，它使用出色的 jQuery Masonry 插件将一堆盒子重新排列成一个像马赛克一样的 pinterest。我从页面底部（就在之前）这样调用框布局渲染方法：

<script type="text/javascript">
  $(function() {
    wall.drawBoxes();
  });
</script>

我也使用这样的谷歌网络字体，就在标签之后：

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>

问题是这些框是在字体加载之前呈现的。并且当字体加载后，框会增大，使得渲染的马赛克布局看起来像垃圾。

我能做些什么来防止这种情况发生？

【问题讨论】：

你可以尝试使用 $(document).load(function() { // data });

标签： javascript jquery html webfonts

【解决方案1】：

您可以添加 loading 回调 - 它会在所有字体加载完成时触发。

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    loading: function() {wall.drawBoxes()}
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

});

【讨论】：

【解决方案2】：

我添加了fontactive 回调，它会在字体加载完成后触发。

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    fontactive: function(fontFamily, fontDescription) { wall.drawBoxes() }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

});

【讨论】：

【解决方案3】：

您可以在 drawboxes 调用之前移动 Web 字体调用以首先加载字体。

我建议将您的函数移动到 domready 函数中。例如

您也可以将字体调用放在<head> 中，以便在加载 DOM 之前加载字体。

你能加载谷歌样式表吗？ <link href="http://fonts.googleapis.com/css?family=Lobster:regular" rel="stylesheet" type="text/css" >

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

  $(function() {
    wall.drawBoxes();
  });

});

【讨论】：

可能必须将该字体函数附加到头部，或者只是在头部使用脚本标签来获取字体。

【解决方案4】：

您可以添加active 回调 - 当所有字体都已呈现时触发。

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    active: function() {wall.drawBoxes()}
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

});

有关可用事件的参考，请参阅webfontloader readme。

【讨论】：

【解决方案5】：

使用 css 更简单：

@import url(http://fonts.googleapis.com/css?family=....);

【讨论】：

可能更简单，但会阻塞。