私のウェブサイトのフォントサイズは、更新するか新しいページを訪れると縮小します

研究室のウェブサイトの更新に取り組んでいます。私はBootstrapでJekyllフレームワークを使用しています。新しいページに移動したり、現在のページを更新したりするたびに、フォントサイズが少し大きくなり、通常のサイズに戻ります。これは不気味な経験になります。私の仕事は現在rigglemanlab.github.ioにあり、この問題が最も顕著なページはrigglemanlab.github.io/membersです。このサイトのコードはgithub.com/benlindsay/lab_siteです。私のウェブサイトのフォントサイズは、更新するか新しいページを訪れると縮小します

私は提案は私のcssシートに以下を追加しましたthis oneのような同様のポストにいくつかの答えを試してみた：

body > div { 
    font-size: 1.4rem 
}

私はem代わりのremとhtmlの代わりbody > divのようなもののバリエーションを試してみました@font-size-base変数を1.4emまたは1.4remに設定しましたが、それぞれの試みで同じ動作が維持されました。私のウェブサイトのレンダリングをクリーンアップするにはどうすればいいですか？

出典

2016-11-17 Ben Lindsay

ChromeまたはEdgeでは問題はありません。このブラウザではどのブラウザを使用していますか？ –

@James自分のコンピュータのChromeとSafariで見ていますが、リモートのLinuxマシンにログインしてFirefoxを使用すると、表示されません...それは私のMacbookに問題があることを意味しますか？私は私のウェブサイトでこの問題を見るだけです。私のフレームワークが調整されたウェブサイト（bedford.io）でも、私のコンピュータにこの問題はありません。 –

@JamesKorden oopsはあなたに正しくタグを付けていませんでした –

Mr Listerが指摘するように、おそらくTypeKitを使用しているように見えるので、おそらくFOUT（文字化けしていないテキスト）のケースです。

この簡単な解決策は、Webフォントがロードされるまで、TypeKitの組み込みイベントを使用してテキストを隠すことです。

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

出典

2016-11-17 07:57:50 MateBoy

...一般にFOIT（目に見えないテキストのフラッシュ）と呼ばれています。私は時間の90％をFOITよりFOUTを選択します。 – JoostS

ありがとう！それは魅力のように働いた。私はそれをさらに進化させ、私のサイトからtypekitに関連するすべてを削除しました。それは私が借りた元のテンプレートから残っていました。私はそこにあるキットIDにアクセスできないので、実際には何もしていないと思います。 –

私のウェブサイトのフォントサイズは、更新するか新しいページを訪れると縮小します

答えて

関連する問題