html - 当我刷新或访问新页面时,我网站上的字体大小先变大后变小

标签 html css twitter-bootstrap jekyll

我正在更新我的研究实验室网站,我正在使用 Jekyll 框架和 Bootstrap。每当我导航到新页面或刷新当前页面时,字体大小都会稍微变大,然后恢复到正常大小。这会带来生涩的体验。我正在进行的工作目前在 rigglemanlab.github.io , 这个问题最明显的页面是 rigglemanlab.github.io/members .此站点的代码在 github.com/benlindsay/lab_site 上.

我尝试了类似帖子的一些答案,例如 this one建议是将以下内容添加到我的 css 表中:

body > div {
  font-size: 1.4rem
}

我尝试了它的变体,比如 em 而不是 remhtml 而不是 body > div 和设置将 @font-size-base 变量更改为 1.4em1.4rem,但每次尝试都会出现相同的行为。如何清理网站的渲染?

最佳答案

正如 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 */

关于html - 当我刷新或访问新页面时,我网站上的字体大小先变大后变小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40645735/

相关文章:

html - CSS 在 mozilla 和 chrome 中给出不同的外观

javascript - 如何在不对特定行进行排序的情况下使 html 表可排序?

javascript - .click() 不适用于页面加载但适用于控制台

html - 仅更新 CSS 中元素的首次出现

css - IE9 DIV 背景图片不调整大小

javascript - 显示 2 个日期选择器日期之间的天数?

html - 如何建立一个无处可去的链接?

javascript - 用于在滚动时将元素 "fly"打开/关闭屏幕的插件

html - 100% 高度与 twitter bootstrap 和 container-fluid

jquery - 在rails中使用Twitter Bootstrap jquery modal链接到另一个页面