adobeのWebフォントが遅れて表示されて「チラつき」が気になる。
そういう時はありますでしょうか。
調べました。読み込み時のチラつきをなくすCSSがありました。メモです。
どうしたらいいんじゃぁ〜(;ﾟДﾟi|!)
最初は初期設定のフォントを表示していて、ちょっと遅れてadobeのフォントに切り替わるので、チラチラチラつきが気になります！
落ち着きなさい。回路がショートしますよ。
ググれば良いのです。
以下をcssファイルに追加してください。
html {
visibility: hidden;
}
html.wf-active {
visibility: visible;
}※上のcssは、adobeのWebフォント限定の方法となります。
html全体をhiddenするのもアレです。
方法的にということですね。
html .content-area {
visibility: hidden;
}
html.wf-active .content-area {
visibility: visible;
}なので上記のようにWebフォント使用箇所を個別で指定するのも良いと思います。
解説
adobeのフォントをWeb利用したい時、「Web プロジェクトに追加」を行います。
そうすると、以下のようなscriptが提供されます。
<script>
(function(d) {
var config = {
kitId: '●●●●●●●',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>そのscriptを見ますと、adobeのフォントが読み込まれたら、<html>タグにwf-activeといclassが差し込まれるようになっているようです。
そのclassを利用したcssということでござました。以上です。
Webフォントはadobeに限らず、入れるとページ表示が重たくなる傾向があります。使いすぎにはご注意。
【AI】イラストを描いてもらいました
この記事にピッタリなイラストのための考えたリクエストは、「宇宙空間に巨大なアルファベット文字が「adobe」と浮かんでいるのを見て驚く宇宙飛行士。」です。
そして選んだモードは以下の3つです。
- 映画のポスター
- ハリウッドSF風
- NASA風
資料置き場
参考：猫でもわかるWordPress
https://wp-firststep.com/adobe-font/
参考：Adobe Fonts
https://fonts.adobe.com/fonts