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

Gruntで快適な環境を整備したい!【インストール編】Gruntで快適な環境を整備したい!【インストール編】

みなさんはHTML/JS/CSSベースの開発をする際、どんな開発環境で開発していますか?今回は快適な開発環境を目指して、Gruntというタスクの自動化ツールを使ってみます。使用するGruntのバージョンは0.4.1です。 Gruntとは…? Gruntとは、ファイルのコピーや削除、JS/CSSのminifyなどの作業を自動化してくれるビルドツールです。Node.jsベースで動作しており、コマンドラインで使用します。ファイルのコピーや削除は人の手が入るほどミスが発生しがちです。また、JS/CSSのminifyはオンラインで行えるものもありますが、修正の度にすべてのファイルに手動で実行するのは大変手間がかかります。このような単純作業を自動化して、効率化を図ることができるのがGruntです。 Gruntのインストール Gruntの動作には、Node.jsと、Gruntのコマンドラインインターフェースであるgrunt-cliが必要です。まず、この2つをインストールします。  ■Node.jsのインストール Node.jsはインストーラを使ってインストールします。Node.js公式サイトのトップページにINSTALLボタンがあるので、ここからインストーラをダウンロードしてください。画面の指示に従って進めて行けば、インストール完了です。コマンドプロンプトで「node -v」と入力し、バージョンが表示されればインストール成功です。

IllustratorからSVGを書き出して、SVGアニメーションを追加するIllustratorからSVGを書き出して、SVGアニメーションを追加する

iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。   SVGをアニメーションさせる際の選択肢 SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。 ・SMILアニメーション・CSS3アニメーション・JavaScriptでの属性値変更・Canvasアニメーション SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia

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

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