リールーブログ

Adobe Typekitのチラつきをなくしましょう!

2016.11.27
Don't be shellfish...Tweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on TumblrShare on Facebook

前回、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;
  }
}

 

これで、意識をフェードインに向かせて、フォントのチラつきをごまかせました!




page top