<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WEBフォント | ウダ2Blog</title>
	<atom:link href="https://uda2.com/blog/tag/web%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88/feed/" rel="self" type="application/rss+xml" />
	<link>https://uda2.com/blog</link>
	<description>大阪でフリーランスとしてWEB制作している管理人が気になった技術をメモったり、作ったツールの紹介などを綴っているブログです。</description>
	<lastBuildDate>Fri, 07 Jul 2023 07:03:51 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>日本語WEBフォントのちらつき対策</title>
		<link>https://uda2.com/blog/fout/</link>
					<comments>https://uda2.com/blog/fout/#respond</comments>
		
		<dc:creator><![CDATA[uda2]]></dc:creator>
		<pubDate>Sat, 13 Apr 2019 14:54:45 +0000</pubDate>
				<category><![CDATA[制作日記]]></category>
		<category><![CDATA[FOUT]]></category>
		<category><![CDATA[WEBフォント]]></category>
		<guid isPermaLink="false">https://uda2.com/blog/?p=2375</guid>

					<description><![CDATA[<p>先日4月10日はフォントの日だったらしくCC道場で「フォントの日だよ〜文字っ子！全員集合〜」というのをやっていた。 動画ではAdobe Fontsの日本語フォントが紹介されていたが、表示が遅くなったりちらつくので日本語の</p>
The post <a href="https://uda2.com/blog/fout/">日本語WEBフォントのちらつき対策</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></description>
										<content:encoded><![CDATA[<p> <br>先日4月10日はフォントの日だったらしくCC道場で「<a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=AGR4-4R2lc8" target="_blank">フォントの日だよ〜文字っ子！全員集合〜</a>」というのをやっていた。<br> 動画ではAdobe Fontsの日本語フォントが紹介されていたが、表示が遅くなったりちらつくので日本語のWEBフォントは手放しで使える感じではない。<br>   世間ではFOIT（表示が遅い）とかFOUT（ちらつく）とかいうらしいくFOUTを解決するためにいったん隠してWEBフォントのロードが完了したら表示するようにしたり、   何らかの事情でWEBフォントが異常に遅かったり返ってこない場合用にタイマーを仕掛けたりするらしく、隠したりするのってSEO的にとかアクセシビリティ的に微妙な気がする。<br> そこで、昔作った「<a rel="noreferrer noopener" href="https://moshiya.uda2.com/" target="_blank">もしや</a>」に日本語webフォントを導入し、ちらつかないように隠すのをやってみた。 </p>



<span id="more-2375"></span>



<p>Adobe Fontsの<a rel="noreferrer noopener" href="https://helpx.adobe.com/jp/fonts/using/font-events.html" target="_blank">フォントイベント</a>によるとAdobe Fontsの日本語webフォントは読み込みが完了するとhtmlタグに「wf-active」というクラスを付けるだけで無くJavaScriptのイベントも用意されていた。<br>まず隠してる要素を排除した状態のCSSクラスを追加する関数を作る。</p>



<pre class="wp-block-code"><code>  var opensesame = function() {
    document.querySelector('body').classList.add("opensesame");
  };</code></pre>



<p>次に、元々提供されたスクリプトにconfigというのがありコレにactiveイベントのアクションにさっき作った関数（opensesame）を指定し、更に元々あるタイムアウトの際に追加する&#8221; wf-inactive&#8221;に&#8221; wf-inactive opensesame&#8221;に書き換えると、アクティブになったときと時間切れの場合に「opensesame」というクラスが追加されるようになった。</p>



<pre class="wp-block-code"><code>  (function(d) {
    var config = {
      kitId: '＜それぞれ＞',
      scriptTimeout: 3000,
      async: true,
      active: opensesame
    },
    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&amp;&amp;a!="complete"&amp;&amp;a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);</code></pre>



<p> 「もしや」は元々 襖の画像を 背景画像で固定していたデザインだったので、襖の画像をCSSで描き直して、時間が来たら開くようにした。つまり、この襖がFOUTのちらつき隠しになっている。<br> （ただ、スクリプトを切ると隠れたままなのでお勧めはしませんが・・・）<br> 使ってるフォントは貂明朝の本文バージョンの「<a rel="noreferrer noopener" href="https://fonts.adobe.com/fonts/ten-mincho-text#about-section" target="_blank">貂明朝テキスト</a>」と約物を半角にしてくれる「<a rel="noreferrer noopener" href="https://yakuhanjp.qranoko.jp/" target="_blank">Yaku Han JP</a>」です。</p>



<p> なお、今回の実験のついでにレスポンシブ化して、扉開けたときに殿様にバウンドアクションさせたいが為にイラストを再度書き起こしたりと無駄な事を色々して丸2日を費やしている。</p>The post <a href="https://uda2.com/blog/fout/">日本語WEBフォントのちらつき対策</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></content:encoded>
					
					<wfw:commentRss>https://uda2.com/blog/fout/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
