Google网页字体在网页加载时呈现隐藏状态

Question

我对此感到非常困惑，不知道如何展示一个例子。

在我的网站上使用Bootstrap。 加载Google Web-Font，就像我过去多次做过一样，从来没有遇到过问题。

出于某种原因，H1和H2在我用鼠标突出显示之前是不可见的，或者一直滚动到页面底部然后再备份。有时候在页面加载时我可以看到字体的一些小部分，比如几个字母的底部等等。

或者，如果我打开检查面板并切换与字体相关的ANYTHING ...如大小，颜色等......它们会显示出来。

这只发生在Chrome中。

有什么建议吗？从来没有见过这个。

Answer 1

我的回答更多的是“不明白但很高兴我明白了”的情况。我遇到问题的内容区域之前的内容窗格在某些链接中使用了webfont。我为这些链接设置了字体大小为18px。将字体大小更改为21px或14px，以及其他几种尺寸可以解决问题。

我不明白为什么......也许网络字体与18px尺寸不兼容？然而，我从来没有碰到过这个......这没有任何意义。也许有人仍然可以对这个问题有所了解。

Answer 2

我也遇到了这个。通过使用JavaScript在页面加载完毕后更改受影响元素上的任何CSS属性，我能够“修复故障”。

使用jQuery的一个例子：

$(window).on('load', function() { $('h1,h2,h3,h4,h5,h6').css('zoom',1); });