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

Kii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装する

本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。 アカウント登録

Kii Cloud JavaScript SDKを使ってデータを保存するKii Cloud JavaScript SDKを使ってデータを保存する

本記事はKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するの続編です。今回は、データをKii Cloud上に保存する方法についてご紹介します。※ユーザーがログインしていることを前提としています。 オブジェクトのスコープを決める ファイルのアップロード含め、ユーザー以外のデータはすべてKiiObjectを使って操作します。また、Kii Cloud上へのデータ保存には、必ずBucket(以降、バケツと呼びます)が必要です。例えばTODOアプリで自分だけのTODO、グループに共有したいTODO、全体に公開したいTODOの機能を実装する場合、それぞれユーザースコープのバケツ、グループスコープのバケツ、アプリケーションスコープのバケツにオブジェクトを保存します(※準備編でも例に挙げています)。

Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]

Kii Cloudは、MBaaSと呼ばれるクラウドサービスのひとつで、モバイルアプリの開発で共通して必要となるサーバ側の機能が提供されています。BaaSを使ったフロントエンド開発は、Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]でもご紹介しました。 MBaaS – Kii Cloud キークラウド Kii CloudもParseと同じく、ユーザー管理やデータ管理など、アプリケーション開発に必要な一連の機能が用意されており、SDKやREST