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

Gruntで快適な環境を整備したい!【タスク記述編】Gruntで快適な環境を整備したい!【タスク記述編】

『Gruntで快適な環境を整備したい!【インストール編】』に引き続き、タスクの自動化ツールであるGruntを使ってみます。今回はタスク記述編ということで、様々なタスクを書いてみます 今回したいこと 今回は以下のタスクを書いてみたいと思います。タスクはGruntfile.jsに書きます。ベースとなるコードは前回の記事『Gruntで快適な環境を整備したい!【インストール編】』の「Gruntfile.jsを作成する」をご覧ください。 タスクの中身は基本的に、処理対象となるファイルやフォルダのパスと処理後のパスで構成されています。ファイルパスの書き方には「コンパクト形式」「ファイルオブジェクト形式」「ファイル配列形式」があります。Gruntのドキュメントを日本語化してくださっているサイトがありますので、こちらを参考にしてください。プラグインによってはサポートしていない形式があるようですので、どのプラグインがどの形式をサポートしているかは各プラグインのドキュメントを参照してください。 ■ファイル、フォルダの複製 ファイル、フォルダの複製にはgrunt-contrib-copyを使います。納品用に必要なファイルをすべてbuildフォルダ下にコピーしてみます。   copy: {    dist:

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

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

ぐるぐる360°回転させる3つのjQuery Pluginぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。 SpriteSpin 最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。(非minifyのspritespin.js:26.5KB) <!-- 画像を表示するHTML