Google chrome 在重新绘制之前，外部字体在Chrome中不可见

使用Chrome时，我遇到了一个本地站点的问题，当站点最初加载时，所有字体都不可见。如果我点击F12或调整屏幕大小，那么所有字体都将可见

字体是使用字体脸从谷歌字体加载的，我假设调整屏幕大小会导致重新绘制，从而解决问题

我发现了一个类似的问题，在

---

有人经历过类似的事情吗？

你可以通过从谷歌字体中加入字体的javascript部分来解决这个问题

这让我非常恼火，所以我做了一些实验，添加了javascript字体插入而不是css，效果非常好=D

从

到

WebFontConfig={
谷歌：{families:['Orbitron:：latin']}
};
（功能（）{
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）；
})(); 

在谷歌字体页面上找到的这两种字体都修复了它，至少对我来说就像一个老板一样……）

<link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Orbitron::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>