当我刷新或访问新页面时，我的网站上的字体会变大然后变小答案

【问题标题】：Font size on my website grows then shrinks when I refresh or visit new page当我刷新或访问新页面时，我的网站上的字体会变大然后变小
【发布时间】：2016-11-17 02:28:04
【问题描述】：

我正在更新我的研究实验室网站，我正在使用带有 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，但每次尝试都存在相同的行为.如何清理网站的渲染？

【问题讨论】：

我在 Chrome 或 Edge 上没有发现任何问题。您在使用哪种浏览器时遇到这种情况？
@James 我在我的计算机上的 Chrome 和 Safari 上看到它，但是当我登录到远程 Linux 机器并使用 Firefox 时，我看不到它......这是否意味着它是我的 Macbook 有问题？我只在我的网站上看到这个问题。即使是我调整框架的网站（bedford.io）在我的电脑上也没有这个问题。
@JamesKorden 哎呀没有正确标记你
听起来是特定于平台的。不幸的是，这将是您需要重新创建它并查看它是否是某个特定操作系统/浏览器的“弱点”的其中之一。
@JamesKorden Yuck。我注意到的一件事是，如果我检查任何标题上的元素并查看 font-weight 属性，它会从我的样式表中给出 500 的字体权重，并在其下方显示 bold h1 user agent stylesheet 和 bold 划掉。它看起来确实有点像我的页面以粗体文本开头，然后变成非粗体。这可能与它有关吗？我不知道user agent stylesheet 是什么意思。

标签： html css twitter-bootstrap jekyll

【解决方案1】：

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

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

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

【讨论】：

... 通常被称为 FOIT（不可见文本的闪烁）。我会在 90% 的时间里选择 FOUT 而不是 FOIT。
谢谢！这就像一个魅力。我更进一步，从我的网站上删除了与 typekit 相关的所有内容。那是我借来的原始模板的剩余部分，我认为它实际上并没有做任何事情，因为我无法访问那里的 kitId（我假设......）。