Question

如果我通过Typekit使用像Myriad pro这样的网络字体，行高会从顶部杀死我对bootstrap词缀偏移量的计算。我使用以下代码：

var navOffset = $('#nav').offset();
$('#nav').affix({
    offset: {
        top: navOffset.top
    }
});

脚本似乎使用后备字体的行高来计算偏移量。有什么想法可以阻止这个吗将行高从em更改为px没有任何影响。谢谢你的回复。

Answer 1

我通过更改

中的加载方法来解决问题

<script type="text/javascript" src="//use.typekit.net/xxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

到

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

scriptTimeout可以解决问题。

Answer 2

另一种解决方案是为偏移脚本设置超时

setTimeout(function() {
  var navOffset = $('#nav').offset();
  $('#nav').affix({
    offset: {
      top: navOffset.top
    }
  });
}, 3000);

bootstrap词缀偏移计算VS字体行高

2 个答案: