<p class="thumb"><img src="http://cdn.zako.org/images/2016/07/fontfit.png" alt="fontfit" width="592" height="332" class="alignnone size-full wp-image-30436" /></p>
<p>もしもウェブサイトのフォントスタイルやサイズ、あるいは文字色を変更したらどうなるのか。言ってしまえばブラウザの開発者ツールでいじればなんとかなるのでしょうけれども、CSSの影響範囲を鑑みながらシミュレーションしていくのは意外と面倒ですよね。</p>
<p>今回は、日本語特有のフォントはないものの、その作業を、非常に簡単におこなえてしまうオンラインツールをご紹介します。</p><!--more-->

<h3 class="header-label">サイトのフォント変更をシミュレーションできる「Font Fit」</h3>
<p>「<a target="_blank" href="http://www.fontfit.com/">Font Fit</a>」は、<strong>指定したページのフォントを変更し、どのように表示されるのかをシミュレーションできる</strong>サービス。</p>
<p>シミュレーションできるのは、フォントのスタイルやサイズ、太さや色など、通常フォントを決める際に検討するものです。</p>

<h4 class="tips">URLで対象ページを指定</h4>
[caption id="attachment_30441" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/07/fontfit1.png" alt="シミュレーションしたいサイトのURLを入力" width="592" height="126" class="size-full wp-image-30441" /> シミュレーションしたいサイトのURLを入力[/caption]
<p>まずサービスのトップページで、フォントのシミュレーションをしたいページのURLを指定します。</p>

<p>すると、サイト内に対象のページが読み込まれます。</p>
[caption id="attachment_30440" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/07/fontfit2.png" alt="シミュレーションしたいサイトが読み込まれた状態" width="592" height="310" class="size-full wp-image-30440" /> シミュレーションしたいサイトが読み込まれた状態[/caption]
<h4 class="tips">BodyやArticleなどの範囲でフォントを変更</h4>
[caption id="attachment_30439" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/07/fontfit3.png" alt="フォントを変更したい部分をクリックして選択" width="592" height="205" class="size-full wp-image-30439" /> フォントを変更したい部分をクリックして選択[/caption]
<p>フォントを変更したい部分をクリックして選択します。すると同一の要素のフォントを一括で変更できるようになります。</p>

[caption id="attachment_30438" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/07/fontfit4.png" alt="フォントのスタイルやサイズなどを変更" width="592" height="323" class="size-full wp-image-30438" /> フォントのスタイルやサイズなどを変更[/caption]
<p>上部メニューでスタイルやサイズ、色などといったものを変更できます。</p>

<h4 class="tips">シミュレーションした状態の共有やエクスポートも可能</h4>
[caption id="attachment_30437" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/07/fontfit5.png" alt="シミュレーションの結果をエクスポート" width="592" height="329" class="size-full wp-image-30437" /> シミュレーションの結果をエクスポート[/caption]
<p>シミュレーションした結果は、そのままHTMLとしてURLで共有することも可能。また、結果をCSSでエクスポートすることもできます。</p>

<p class="desc"><a target="_blank" href="http://www.fontfit.com/fonter/load/9d9ae255-8d16-4a3a-9712-fde166ddb5ff">シミュレーションの結果</a></p>

<p>興味があるかたは<a target="_blank" href="http://www.fontfit.com/">Font Fit</a>へどうぞ。</p>
