セミナーレポート「パソナテックセミナー：広がる"日本語Web Fonts"の世界 Webデザインに"フォント"を取り入れるとは？」 #typesquare
2012年4月12日、パソナグループ 本部 8階ホールで開催された「パソナテックセミナー：広がる"日本語Web Fonts"の世界 Webデザインに"フォント"を取り入れるとは？」に参加してきました。
モリサワ「TypeSquare」タイアップセミナーとのことで、モリサワの阪本さんによる"フォント"解説のミニセッションと、池田拓司さん（クックパッド）の2セッションで構成されていました。
池田さん（@tikeda）のセッションが非常に素晴らしく、特に、このセミナーのために作られたデモデータが充実していました。
日本語Web Fontsの遅延問題へのひとつのソリューション（読み込みを待って待ってフェード）
日本語Web Fontsを使っている場合、いったんデバイスフォントで表示された後、日本語Web Fontsに切り替わるのが不自然だという問題がありますが、池田さんのセッションでは、読み込むまで非表示にして、読み込み後、アニメーションを伴って表示させればどうだろう？という提案がされていました。
DTP Transitでは、見出し部分にTypeSquareを使っていますのが、さっそく、この効果を施してみました。
head要素内に次のJavaScriptを記述します。
<script type="text/javascript">
$(function() {
setTimeout(function(){
$("body").addClass('load');
},1000);
});
</script>
次のようにCSSを記述します。
h1.asset-name {
font-family: "Soft Gothic Bold";
opacity: 0;
-webkit-transition: all 1s ease;
-webkit-transform: translate(0, 10px);
}
.load h1.asset-name {
opacity: 1;
-webkit-transform: translate(0, 0);
}このサンプルでは、開始時に下に10ピクセル移動させ、アニメーションを伴って上方向に移動、その際に不透明度がオフになります。
追記（2012年10月15日）：
半年たっての所感をまとめました。
© Swwwitch, Inc. Some rights reserved.