当我刷新或访问新页面时,我网站上的字体大小先变大后变小
Font size on my website grows then shrinks when I refresh or visit new page
我正在更新我的研究实验室网站,我正在使用 Bootstrap 的 Jekyll 框架。每当我导航到新页面或刷新当前页面时,字体大小都会略微变大,然后 returns 恢复到正常大小。这会带来生涩的体验。我正在进行的工作目前在 rigglemanlab.github.io, and the page where this issue is most noticeable is rigglemanlab.github.io/members. The code for this site is on github.com/benlindsay/lab_site.
我尝试了一些类似帖子的答案,例如 this one,其中建议将以下内容添加到我的 css sheet:
body > div {
font-size: 1.4rem
}
我尝试了类似 em
的变体而不是 rem
和 html
而不是 body > div
并将 @font-size-base
变量设置为 1.4em
或 1.4rem
,但每次尝试都会出现相同的行为。如何清理我网站的渲染?
正如 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 */
我正在更新我的研究实验室网站,我正在使用 Bootstrap 的 Jekyll 框架。每当我导航到新页面或刷新当前页面时,字体大小都会略微变大,然后 returns 恢复到正常大小。这会带来生涩的体验。我正在进行的工作目前在 rigglemanlab.github.io, and the page where this issue is most noticeable is rigglemanlab.github.io/members. The code for this site is on github.com/benlindsay/lab_site.
我尝试了一些类似帖子的答案,例如 this one,其中建议将以下内容添加到我的 css sheet:
body > div {
font-size: 1.4rem
}
我尝试了类似 em
的变体而不是 rem
和 html
而不是 body > div
并将 @font-size-base
变量设置为 1.4em
或 1.4rem
,但每次尝试都会出现相同的行为。如何清理我网站的渲染?
正如 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 */