最近、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:’ＭＳ 明朝’,’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フォントですが、ブラウザの対応も早く進んでほしいものです。