使用类似Typekit这样的在线字体，固然可以让网页在任何地点都能获得统一的视觉效果，但缺点也很明显——在字体加载完全之前会出现多次闪屏。

这一问题目前是无法正面解决的，因为各地的网速都不一致，而且像Typekit这样的服务通常在中国的载入速度相当缓慢。

我们只能通过一些曲折的方法掩盖闪屏，但实质上，这种闪烁客观存在且不会以网页设计者的意志而发生转移。

在术语中，这种闪屏被简称为「FOUT」，即「字体格式未加载完全前的闪烁」（Flash of Unstyled Text）。事实上，Typekit在其官方博客中早已给出了解决办法——当然，这也是一种治标不治本的方法。其主要思路是，通过定义「字体事件」来区分「加载中」（wf-loading）、「激活」（wf-active）和「未激活」（wf-inactive，即在「加载超时」（timeout）后认定该字体不可用）等三种状态，继而在CSS中针对上述三种状态给出不同的渲染方式。

通常，我们可以隐藏（visibility:hidden）处于加载中状态的字体，显示（visibility:visible）已激活的字体，并为未激活的字体添加替代字体（设置font:family）。

一般情况下，如果将加载中的字体隐藏起来，那么可能会在几秒钟内（视字体具体的加载时间而定）出现网页空白或者部分元素缺失的（视你针对哪些元素设置了visibility字段）。

为了避免上述窘境，我们可以对已激活字体设置一个淡入效果，这样就可以在字体完全加载之前生成一个画面慢慢浮现的效果，看上去比较优雅。

具体的实现方式很简单，只需要在Farbox的网站设置后台里，将以下代码添加到渲染面板的脚本输入框里： 

<style>
    .wf-loading body{
    opacity: 0;
    visibility: hidden;
    }
 
    .ie.wf-loading body{
    visibility: hidden;
    }
 
    .ie.wf-active body{
    visibility: visible;
    }
 
    .wf-active body{
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.64s ease-in-out;
    -moz-transition: opacity 0.64s ease-in-out;
    transition: opacity 0.64s ease-in-out;}
</style>

另外，Typekit其实还有多种不同的嵌入方式，其中包括「标准嵌入」（standrd embed）和「异步加载模式」（asynchronous pattern）。两者之间的区别在于，当在线字体因超时而铁定无法载入时，标准嵌入可能会导致整个网页无法显示，最终卡死在白屏上，而异步模式则不影响其他元素的渲染，并且在载入超时后自动使用「备用字体」（fallback）。说到底，异步加载模式加强了网页的「可得性」，其具体解释可以参考《异步加载非核心CSS》。

针对上述两种嵌入模式，Typekit给出了详细的操作指导和优缺点分析。没时间阅读的朋友可以直接添加以下脚本，添加位置和此前的步骤相同，注意将kitId换成你自己的： 

<script type="text/javascript">
  (function() {
    var config = {
      kitId: 'kitId',
      scriptTimeout: 3000
    };
    var h = document.getElementsByTagName('html')[0];
    h.className += ' wf-loading';
    var t = setTimeout(function() {
      h.className = h.className.replace(/(\s|^)wf-loading(\s|$)/g, ' ');
      h.className += ' wf-inactive';
    }, config.scriptTimeout);
    var d = false;
    var tk = document.createElement('script');
    tk.src = '//use.typekit.net/kitId.js';
    tk.type = 'text/javascript';
    tk.async = 'true';
    tk.onload = tk.onreadystatechange = function() {
      var rs = this.readyState;
      if (d || rs && rs != 'complete' && rs != 'loaded') return;
      d = true;
      clearTimeout(t);
      try { Typekit.load(config); } catch (e) {}
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);
  })();
</script>