Question

我正在努力更新我的研究实验室网站，我正在使用带有Bootstrap的Jekyll框架。每当我导航到新页面或刷新当前页面时，字体大小会稍微增加，然后返回到正常大小。这会带来不平稳的体验。我正在进行的工作目前位于rigglemanlab.github.io，此问题最引人注目的页面是rigglemanlab.github.io/members。此网站的代码位于github.com/benlindsay/lab_site。

我已尝试过类似this one等类似帖子的答案，其中的建议是将以下内容添加到我的css表中：

body > div {
  font-size: 1.4rem
}

我尝试使用em代替rem和html代替body > div并将@font-size-base变量设置为1.4em或1.4rem，但每次尝试都会保持相同的行为。如何清理我网站的渲染？

Answer 1

正如Lister先生所指出的那样，这可能是FOUT（无格式文本的闪现）的情况，因为看起来你正在使用TypeKit。

对此的快速解决方案是使用TypeKit的内置事件来隐藏文本，直到加载了网页字体。

.wf-loading { visibility: hidden; } /* font is loading and hidden */
.wf-active, .wf-inactive { visibility: visible; } /* font has loaded and is visible */

当我刷新或访问新页面时，我网站上的字体大小会逐渐缩小

1 个答案: