秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の６ 書体を試験的にWebフォント化し、HTML版を作成しました。
推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。
Flash版はこちら＞Flash見本帳
HTML版はこちら＞スマートフォン向け秀英体見本帳（※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。）
チャレンジしたこと
Webフォントでの縦書き表現
CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題（参照：縦書きにWebフォントを使いたい！けど使えるのか検証してみた）がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。
画面の向きに応じた縦組みと横組みの切り替え
ポートレートモード(縦向き)では縦組み、ランドスケープモード(横向き)では横組みの表示と、MediaQueryを使用し、画面の向きに応じて組み方向を切り替えています。
画像を使わない
背景のチェック状のパターン、ヘッダーのグラデーションには、CSS3グラデーションを使用しています。テキストへ光彩やぼかしといった効果を適用できる『書体見本』画面ではCSS3のテキストシャドウを、お手本に合わせて秀英体の描画が体験できる『秀英体を書く』画面のガイド部分ではSVGを使用しました。
画面上には表示されていませんが、『秀英体を書く』画面での点数判定用に１枚だけjpg画像を使用しています。SVGをCanvasに描画し、画像として取得する方法もあったのですが、CanvasにSVGを一度描画してしまうと、セキュリティの関係上その後Canvasから画像を取得できなくなるため、ここでは画像を使用しています。
画像の差分
『秀英体を書く』画面では、ユーザが描画した描画結果をCanvasから画像として取得し、あらかじめ用意したお手本画像との差分を取得することで採点を行っています。画像の差分にはJavaScriptとCanvasによる画像差分表示を行うオープンソースライブラリJS-ImageDiffを使用しています。JS-ImageDiff内部では、CanvasPixelArrayが使用されており、画像のピクセルのrgbaをそれぞれ数値で取得できるため、重なり部分のピクセル数をカウントし割合を計算しています。
その他ハマったポイント
前述の、縦書きでグリフが寝てしまう問題や、SVGをCanvasに描画する際の問題の他にも、以下のようなハマりポイントがありましたので紹介したいと思います。
font-familyでWebフォントを複数指定してもダウンロードされない
他のWebフォントサービス同様、今回使用したWebフォントサービスでも、表示に必要な字形だけをダウンロードするダイナミックサブセットが導入されていました。サブセットが行われる場合、ページの解析時にスタイルが定義され、font-familyが指定されている必要があります。font-familyでWebフォントを複数指定した場合、１番目のフォントしかダウンロードされていないようでした。たとえば下記の指定の場合、DNPShueiMinPr5-L しかダウンロードされません。この挙動は使用するWebフォントサービスや、閲覧するブラウザに依存する問題だと思われます。
font-family:’DNPShueiMinPr5-L’,’DNPShueiShogoMinStd-H’;
秀英体同士の違いを比較することのできる『秀英体比較』画面では、「東国なの」というテキストに対して、全種類のフォントのサブセットが必要でしたが、font-familyへの複数指定ではダウンロードできなかったため、非表示にしたダミーテキストにfont-family指定することで必要なフォントをダウンロードさせています。
グリフが半分に切れて表示される
左図のように、フォントが半分に切れたまま表示されてしまうことがあります。親要素のdivにoverflow:hiddenの指定をしているページでのみ発生するため、この指定が関係ありそうなのですが、こちらの不具合には再現性が無く、原因については不明のままです。
lette-spacingが効かない
デバイスフォントに対してはlette-spacingで正常に字間を設定できるのですが、Webフォントを適用するとlette-spacingが効かずに字間が詰まってしまいました。PC版のChromeでは正常に表示されます。こちらも原因については不明のままです。
まとめ
以上のように、HTML5版秀英体見本帳では、Webフォントサービスの利用やWebフォントを使用した縦書き表現、MediaQueryでの文字の組み方向の切り替え、SVGやCanvas、CSS3で追加されたプロパティの利用など、いくつかの新たな試みを行いました。まだまだ今後の課題がありますが、Webフォントの可能性を少しでも感じていただければと思います。
生まれかわった秀英体をぜひWebフォントでご覧ください。