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

主要なモバイルUIフレームワークを比較してみました主要なモバイルUIフレームワークを比較してみました

WEB標準技術でアプリケーションを開発するためのUIフレームワークが増えてきました。モバイルWEB向けの業務アプリケーション開発に有用なUIフレームワークを選定するため、主要UIフレームワークのUIコンポーネントを中心に調査を行いましたのでその結果をご紹介したいと思います。ドキュメントベースではありますが、業務アプリケーションの開発に必要な、フォーム要素やグラフ等の各種コンポーネントが揃っているか、スタイルのカスタマイズ有無、複数人開発に対応するためMVCフレームワークが統合されているか等に注目し調査を進めました。以下の項目に分けてご紹介していきます。 調査対象フレームワークの概要 対応環境 主要UIコンポーネント その他(CSS,MVCフレームワーク統合有無など) 特徴 調査対象フレームワークの概要  以下6つのフレームワークを対象に調査を行いました。

SVGアニメーションの再生タイミングについてSVGアニメーションの再生タイミングについて

今回は前回書きました『IllustratorからSVGを書き出して、SVGアニメーションを追加する』の関連記事です。SVGアニメーションの再生タイミングにかなりハマったのでもう少し詳しくご紹介したいと思います。OPERAさんの2006年(!)の記事に、詳しい解説がありましたので、参考にしています。こうして見てみると、枯れた技術かと思われていたSVGに再び光が当たった感がありますね。  animate要素の追加  例えば、以下のようなanimate要素を追加したい場合。 <animate attributeName=”opacity” begin=”indefinite” to=”0″ dur=”0.25″ fill=”freeze”

Sass/Compassを使ってCSSスプライトに挑戦してみました。Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を1枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の1つとして利用されています。 Sass/Compassについて  Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。 次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。 CompassでCSSスプライト  CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。 続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の4行です。この4行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。  @charset “utf-8”; @import