縦書きに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’;
}

表示してみたものがこちら。左がWindows版Safari、右がMac版Safari、上から、システムフォント、otf、ttfとなっています。

Windows版SafariではWebフォントは表示されるのですが、フォントが横に寝てしまいました。一方、Mac版Safariでは正しい向きで縦書きにはなるのですが、WEBフォントが適用されているのは漢字のみで、かなはシステムフォントのヒラギノゴシックが表示されてしまいます。これは、漢字の場合は縦書きでも横書きでも共通のグリフを参照している一方で、かなはそれぞれ縦と横用のグリフがあるため、縦用のグリフをひもづけているテーブルを読み込めず、デフォルトのシステムフォントが表示されてしまっている、ということのようです。

SVGで縦書き

SVG内でも縦書きが可能なので、こちらの方法でもWEBフォントを適用してみることにしました。SVGでは、WEBフォントを利用する仕組みとして、CSS3の@font-face規則に対応するプロパティが定義されています。以下のようにしてフォントを読み込み、適用します。

<svg>
 <defs>
  <font-face font-family=”shuei”>
   <font-face-src>
    <font-face-uri xlink:href=”./svg/shueiSvgFont.svg#shueiFont”>
     <font-face-format string=”svg”/>
    </font-face-uri>
   </font-face-src>
  </font-face>
 </defs>
 <g style=”font-family:’MS 明朝’,’HiraMinProN-W3′,’Hiragino Mincho ProN’, serif;” writing-mode=”tb”>
   <text x=”120″ y=”30″ font-size=”43″ letter-spacing=”27″>
      東国なの
   </text>
 </g>
 <g style=”font-family:shuei;” writing-mode=”tb”>
   <text x=”30″ y=”-50″ font-size=”80″ letter-spacing=”0″ fill=”orangered” id=”shuei”>
      東国なの
   </text>
 </g>
</svg>

font-face-uriでフォントファイルを指定するのですが、今回の検証ではotf,ttfは読み込めていないようでしたので、必要なグリフのみをsvgフォント化し、利用しました。svgフォントであればfont-face-uriで問題なく読み込めました。表示したものがこちら。左がWindows版Safari、右がMac版Safari、右から、システムフォント、svgフォントとなっています。

効果をかけたい

更に欲張って、これらに効果をかけてみます。ここまでで縦書きにWebフォントが適用できるのはSVGでの縦書き×SVGフォントの組み合わせでしたので、こちらにCSS3の効果をかけてみました。ドロップシャドウは比較的問題なくかかるのですが、グラデーションなどその他の効果はまったく表示されなかったりしました。SVG自体にもFilter機能がありますが、Safariでは現在未対応となっています。

【Nehanの利用】

そこで、どうしても効果をかけたい場合は、縦書き表示を実現することのできるJSライブラリ「Nehan」(MITライセンス)を使います。Nehanは基本的に横書き用のグリフを縦組みに擬似的に表示させているので、WEBフォントもCSS効果も問題なく適用させることができます。ただし、音引きや句読点については画像化されています。画像化されるグリフには当然ながらWEBフォントが適用されないので注意が必要かと思います。表示してみたものがこちら。上がWindows版Safari、下がMac版Safariです。

結論

以上、だいぶ長くなってしまいましたが、結論としてはWEBフォントをどうしても縦書きで使いたいのならば、今のところSVG(もしくは漢字のみにする)。CSS効果をかけたい場合はNehanを使う、という結論になりました。モリサワさんがクラウドフォントサービスの「TypeSquare」を発表したりなど、盛り上がりを見せているWebフォントですが、ブラウザの対応も早く進んでほしいものです。

Related Post

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]

本記事はParse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]の後編です。前編では、Parseの管理画面と、JavaScript SDKのうちBackbone.jsをベースとしている部分とCollectionの生成に必要となるデータの取得方法をご紹介しました。後編では引き続き、ParseのJavaScript SDKの機能として以下の3つをご紹介いたします。 Parse.User: アカウント管理 Parse.File: 画像をはじめとしたファイルのアップロード処理等 Parse.Promise: Defferedの仕組み Parse.GeoPoint: 位置情報 Parse.User

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]

ParseはBaaS(Backend as a Service)と呼ばれる、アプリに共通して必要となるバックエンドの機能を提供するクラウドサービスのひとつです。BaaSを利用することで、データの同期やユーザ管理、プッシュ配信、ソーシャル連携など、アプリごとに独自の開発を行うことなく効率よく開発を進めることができます。  Parseでは、iOS、Android、JavaScript、.NET、OS Xと様々なプラットフォーム向けのSDKが提供されています。今回はこのParseのJavaScript SDKを使ってみます。 新規アプリケーションの作成