WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

先日、1年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました!スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。

更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。

検証端末

今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。

  • AQUOS PHONE SERIE ISW16SH / Android4.0.4 / 標準ブラウザ、Android Chrome
  • Galaxy Nexus / Android4.2.2 / 標準ブラウザ、Android Chrome
  • iPhone4S / iOS5 / Mobile Safari
  • iPhone5 / iOS6 / Mobile Safari

Webフォントとwriting-modeの関係

 以前、「縦書きにWebフォントを使いたい!けど使えるのか検証してみた」という記事でwriting-modeの縦組とWebフォントの組み合わせの検証結果を紹介しました。このときはWindows版Safari(5.1.2)とMac版Safari(5.1.1)、iOS5のMobileSafariで検証し、以下のような結果になりました。

  • WinではWebフォントは表示されるが、フォントが横に寝てしまう
  • Mac/iOSでは正しい向きで縦書きにはなるが、WEBフォントが適用されているのは漢字のみで、かなはデバイスフォントになってしまう

 今回の更新でもiOS5は推奨動作環境に含んでいたので、縦組部分のHTMLの構成は涅槃とSVGtextのままでwriting-modeは使いませんでしたが、その後iOS6ではかなにもWebフォントが正しく適用されるようになっていました!前回は検証対象外だったAndroidでも表示できました。少しずつですが改善が進んでいるようです。writing-modeの縦組+Webフォントは、環境を限定すれば実現できるかも!?

Android Chromeでline-heightがかわる?

 上記のwriting-modeとの組み合わせの検証結果のように、Android Chromeでのみベースライン?が上がったような表示になってしまいました。SVG要素内のSVG textで縦組している画面では文字間が、横組みや涅槃を使った画面では行間(涅槃の場合brで改行して縦組として見せているので、文字間はline-heightで指定されている)が空いてしまい、表示が崩れてしまいました。原因が分からなかったため、今回はUAを判別し、Android Chromeのみline-heightの調整を行いました。

AndroidとTTF

 当初、AndroidではTTF形式への切替えを予定していました。保有しているAndroid端末での検証の結果、Galaxy Nexus(Android4.2.2)の標準ブラウザでは表示されるのに、AQUOS PHONE SERIE ISW16SH(Android4.0.4)の標準ブラウザではまったく適用されずデバイスフォントが表示されてしまう問題が発生。どちらもWebKitのビルド番号は534.30でした。一部端末とOSの組み合わせで利用できないフォントフォーマットがあるようです。今回はどの保有検証端末でも不具合なく表示されたOTFに統一することにしました。
 

Androidの標準ブラウザで特定のグリフが抜ける?

 フォント形式をOTFに統一したところ、Galaxy Nexus(Android4.2.2)の標準ブラウザだけ縦組のレイアウトで特定のグリフが表示されない問題がみられました。SVGのtext要素とOTFの相性が悪いという可能性も考え、縦組みライブラリの涅槃(グリフは横組み用だけど見た目的に縦組ができる)でも試してみましたが、涅槃の場合も特定のグリフだけ表示されず。横組の場合は正しく表示されるので、マークアップとの相性なのか・・・もう少し細かい検証を行わないと分かりませんが、未だ謎のままです。他の端末(AQUOS PHONE SERIE ISW16SH(Android4.0.4)の標準ブラウザとAndroid Chrome、Galaxy Nexus(Android4.2.2)のAndroid Chrome)では問題なく表示されました。

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デザインガイドラインに従わないと違和感のある画面となります。

縦書きにWebフォントを使いたい!けど使えるのか検証してみた縦書きに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’;}

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