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

フォントの機能を使えるCSS3のFont feature settingsとはフォントの機能を使えるCSS3のFont feature settingsとは

CSS3でWebフォント機能が追加され、異なるデバイス上でも同じフォントの表示が可能になったことをご存じの方も多いと思います。CSS3のフォントに関する仕様ではその他にも様々な機能が追加されており、そのひとつが今回ご紹介するfont-feature-settingsプロパティです。 Webフォントで利用できるフォントフォーマットにはTTF(True Type Font)、OTF(Open Type Font)、EOT(Embedded OpenType)、SVG Font(Scalable

Kii Cloud JavaScript SDKを使ってデータを保存するKii Cloud JavaScript SDKを使ってデータを保存する

本記事はKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するの続編です。今回は、データをKii Cloud上に保存する方法についてご紹介します。※ユーザーがログインしていることを前提としています。 オブジェクトのスコープを決める ファイルのアップロード含め、ユーザー以外のデータはすべてKiiObjectを使って操作します。また、Kii Cloud上へのデータ保存には、必ずBucket(以降、バケツと呼びます)が必要です。例えばTODOアプリで自分だけのTODO、グループに共有したいTODO、全体に公開したいTODOの機能を実装する場合、それぞれユーザースコープのバケツ、グループスコープのバケツ、アプリケーションスコープのバケツにオブジェクトを保存します(※準備編でも例に挙げています)。

Kii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装する

本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。 アカウント登録