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

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

【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点

HTML5のAudio要素を使い、再生する音を遅延無く切り替える方法を、先週8/20(土)に開催された「第5回おばかアプリ選手権」で紹介しましたアプリ、iBooNを例に紹介したいと思います。 iBooNの仕組み iBooNは、Mobile Safari上で動作するWEBアプリです。Mobile Safariから加速度を取得(iOS4.2から加速度センサーに対応)し、前後のシェイクジェスチャ(ぶーんと走らせる動き)、左右の傾き(ドリフト)に応じて異なる車の音を再生させています。 当初は複数のAudioファイルをプリロードさせ、ユーザのアクションに応じて各ファイルを再生させる予定でしたが、Mobile Safariでは複数のAudioファイルをプリロードして保持しておくことが難しく、1音しかプリロードされた状態で鳴らなかったり(参照:iPhoneでHTML5のaudio要素を使うときに気をつけたいこと)、ユーザのアクションごとにAudioデータのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。  ポイント

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

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