twitter-bootstrap - Google webfonts 在页面加载时呈现不可见

Question

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

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

由于某种原因，H1 和 H2 是不可见的，直到我用鼠标突出显示它们，或者一直滚动到页面底部然后返回。有时在页面加载时，我可以看到字体的一点点，比如几个字母的底部等。

或者，如果我打开检查面板并切换与字体相关的任何内容......比如大小、颜色等......它们会出现。

这仅在 Chrome 中发生。

有什么建议么？以前从未见过。

Answer 1

My answer is more of a "Don't understand it but glad I figured it out" situation. The content pane which was prior to the content area that I was having trouble with was using the webfont in some links. I had the font-size set to 18px for those links. Changing the font size to 21px or 14px, and several other sizes solved the problem.

I DO NOT understand why... Perhaps the web-font isn't compatible with 18px size? Yet I've never run into this... it makes zero sense. Maybe someone can still shed some light on the subject.

Answer 2

我也遇到这种情况。一旦页面完成加载，我就能够通过使用 JavaScript 更改受影响元素上的任何 CSS 属性来“修复故障”。

使用 jQuery 的示例：

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