Webフォントを使用したスマートフォン向け秀英体見本帳を公開

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の6 書体を試験的に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を使用しました。
画面上には表示されていませんが、『秀英体を書く』画面での点数判定用に1枚だけ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フォントを複数指定した場合、1番目のフォントしかダウンロードされていないようでした。たとえば下記の指定の場合、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フォントでご覧ください。

Related Post

ぐるぐる360°回転させる3つのjQuery Pluginぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。 SpriteSpin 最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。(非minifyのspritespin.js:26.5KB) <!-- 画像を表示するHTML

縦書きにWebフォントを使いたい!けど使えるのか検証してみた縦書きにWebフォントを使いたい!けど使えるのか検証してみた

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari(5.1.2)とMac版Safari(5.1.1)です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;      src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {      font-family:’DNPShueiMinPr5B’;}

WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれWebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

先日、1年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました!スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。 更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。 検証端末 今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。 AQUOS PHONE SERIE ISW16SH