Adobe Typekitのチラつきをなくしましょう!
2016.11.27
前回、Adobe Typekitの設置方法をご紹介しました。
→ Adobe TypekitをWEBサイトに簡単設置!
設置は簡単にできましたが、ここでちょっとストレスになることが!
ちらつく!!
WEBフォントを使うと、
1)いったんブラウザは代替フォントでテキストを表示して、
2)一瞬消えたあとに指定したWEBフォントに切り替わります。
数秒ではありますが、このちらつきは気になる・・・・・。
さらに、今回はIEは消えずにスムーズに切り替わってくれるのに、ちょろめッチのほうが消えてしまう・・・・。
なので、なにがしかの対策を!!
CSSで回避する!!
Adobe Typekitの日本語フォントをローディングして切り替わるまでに、約5秒ほどかかっていました。WEBサイトなんで、その他もろもろ・・・特にfontawesomeとシェアボタンですが・・・・で結構時間がかかってしまう。
少しでも爆速にお近づきにならなければいけませんでした。
そこで、いろいろ調べた結果、
Adobe Typekitは、webfontloader.jsが組み込まれていて、
.wf-loading と.wf-activeを付加させています。
先に説明した
1)いったんブラウザは代替フォントでテキストを表示して、
は、ローディング中で、html.wf-loadingとなります。
2)一瞬消えたあとに指定したWEBフォントに切り替わります。
は、ローディングが完了し表示で、html.wf-activeに変わります。
なので、これをつかって、応急処置的な対応です・・・・。
対策A案「表示まで非表示」
コードはこちら↓
.wf-loading { visibility: hidden;} .wf-active { visibility: visible;}
WEBフォントのDLが終わるまで非表示、ページが真っ白になり、
ローディングが完了したら表示する方法です。
まぁこれでもいいんですが・・・・なんとなぁ~く・・・・非表示って・・・・
対策B案「いい感じに表示」
コードはこちら↓
body { animation: fadeIn 4s ease 0s 1 normal; -webkit-animation: fadeIn 4s ease 0s 1 normal; } @keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}} @-webkit-keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
どうせチラつくん前提なら、意識を別のとこに移せばいい!ってことで、フェードインに変更しました。
ただし、IEだとフェードインが汚いです。
でもでも、IEはもともとスムーズに切り替えてくれていたので、フェードインはちょろめッチだけに適用します。
コードはこちら↓
@media screen and (-webkit-min-device-pixel-ratio:0) { body { animation: fadeIn 4s ease 0s 1 normal; -webkit-animation: fadeIn 4s ease 0s 1 normal; } }
これで、意識をフェードインに向かせて、フォントのチラつきをごまかせました!
Contact