プロポーショナル化雑感

blogのフォント表示をプロポーショナルにしました。

はてブで話題になっていた、文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング – ICS MEDIA や、Typekitヘルプ | CSS での OpenType 機能の構文を参考に、font-feature-settingsを記述してみました。その際に気づいたことをメモしています。

雑感

  • 色々試しましたが、結局 palt(全ての文字をプロポーショナル)にしました。(※1)
  • pkna(かなのみプロボーショナル)、halt(約物・句読点半角)なども試しましたが、やめました。本当は括弧類は半角、句読点は全角にしたいのですが、そのようなオプションはありません。
  • プロポーショナル(字幅に合わせた文字送り)にするのが目的で、たくさん文字を詰め込もうとしているわけではありません。試しに letter-spacing: 0.03em などを併記してみましたが、こんどは多用している三点リーダ二つ( …… )の間に隙間が出来てしまいました。やめました。
  • 項目の区切りに多用していた全角パイプ( | )の前後が詰まってしまいました。どうしよう。

あまりの融通の利かなさに、PageMakerの初期バージョン(30年近く前)を使用してる気分になりました。Web上でキレイなフォントをキレイに(かつ合理的に)組版できるようになるのはまだ数年ほどかかりそうです。

Webフォントのプロポーショナル化

  • Googleが用意したWebフォント(Noto Sans)にはfont-feature-settingsは適用されませんでした。軽量化のためにプロポーショナルメトリクス情報が削除されているようです。
  • 武蔵システムの「サブセットフォントメーカー」で軽量化するとやはりメトリクス情報は削除されてしまいます。ちなみに、ヒント情報なども削除されるので、表示も劣化してしまうようです(※2)。
  • (サブセット化・軽量化されていない)本来のNoto Sansを武蔵システムの「WOFFコンバータ」で変換するとメトリクス情報は削除されませんでした。ですが、容量が巨大なので、Webフォントとして使用するのは現実的ではありません。
  • メトリクス情報を残したままの合理的なサブセット化の方法はまだ見つけていません(※3)。アプリケーションFontForgeGlyphsなどを調べ始めています。

※1
OSXのSafariでは括弧類の挙動が変です。直後にリンクがあると特に文字詰めの崩れが激しいようです。バッドノウハウには関わりたくないのでとりあえず無視します。他にも制限・不具合はあるようで、こちらのページなどにもまとめられています。
「文字詰め」の使い方 – TypeSquare Blog

※2
武蔵システムさんのサブセットフォントメーカーを使うとフォントが劣化する件 | つめもよう

※3
源ノ角ゴシック(Source Han Sans)をサブセット化したい時にやったことまとめ – フロントエンド開発Blog | オレには鈍器がある 無料ゲーム公式サイト

CSSとJavaScriptで文章をメモ書き風に – ウェブログ – Hail2u.net

Webフォントの導入

blogのフォントを変更しました。

スマートフォンの表示が良くなかった(モトヤが好みでなかった)ので、Webフォントを導入しました。Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Accessで提供されているNoto Sansを使っています。

@font-faceの記述の際に、フォントファミリー「Coluli」を定義し、ローカルフォントとして游ゴシックを組み合わせました。変更後は、

OSX:游ゴシック体(ミディアムとボールド)
Windows10:游ゴシック(ミディアムとボールド)
Windows8.1:游ゴシック(レギュラーとボールド) ◎ミディアムが入っていないため。
Windows7:メイリオ ◎游ゴシックが入っていないため。
スマートフォン:Noto Sans(デミライトとボールド)

で表示されていると思います。

ZTE Blade V580のもやもや解消

DSCN1102

先日購入して不満が多く、すぐに使わなくなってしまったZTE Blade V580ですが、設定をいくつか変更したところかなり使いやすくなりました。今はこれを好んで持ち歩いています。

以下、備忘録です。


rootの取得。

細かな設定を変更するためにrootを取りました。あまり詳しくないのですが、適当にググって作業してみたところ、無事root化できました。

  • KingRootのデスクトップ版アプリをWindowsマシンにインストールしてroot化しました。
  • root化の際は、開発者オプションを有効にして、USBデバッグモードで作業しました。
  • root取得後の確認中、やや挙動不審な画面となってしまいました。ウィジェットなどを操作できなくなる、一部アイコンが表示されなくなるなど、基本操作もできない状態になってしまったので一回データの初期化を行っています。初期化後もrootは取れたままでした。
  • rootが取れているかどうかの確認は、Root Checker Basicを使いました。
  • ファイルの移動やパーミッションの変更は、AndoroidアプリのESファイルエクスプローラーを使って行いました。
  • パーミッション操作の前にAndoroidアプリのSuperSUを使って権限を変更しました。

私は上記の方法で作業しました。太字のキーワードで検索すれば詳細な情報が見つかると思います。また、もっと有効・簡便な方法があるかもしれません。


Density(ピクセル密度)の変更。

AndroidアプリのEasy DPI Changer [Root]を使ってDensityを480から400に変更しました。一画面あたりの情報量が増え、大変使いやすくなりました。大きめのスマホを持ち歩く甲斐があります。


フォントをNoto Sansに。

Googleが配布しているNoto Sans(NotoSansCJKjp-hinted)をインストールしました。fonts.xmlなどを編集することで、表示フォントはモトヤから(7ウェイトの)Noto Sansとなりました。複数ウェイトをインストールしたので、擬似ボールド表示は発生しません。また、他言語フォントとの併用を前提にした軽量版のNoto Sansでなく、グリフ全部入りのフルバージョンなので、豆腐も発生しません。Androidのバージョンは5.1のままですが、6.xのような使い心地になりました。かなり快適です。

◎変更にあたっては、こちらのサイトの記事を参考にさせていただきました。


Densityとフォントを変更した後の画面はこんな感じです。

ZTE Blade V580

ちなみに、Android 5.1のarp AS01Mはこんな感じ、Android 6.0の香港版ZTE Blade V7 Liteだとこんな感じです。


指紋認証をオフに。

指紋認証は使わないことにしました。使うボタンがひとつ減り、操作はよりシンプルになりました。バッテリーの持ちも少しよくなった気がします。画面ロックまでの時間を増やす(私は5分)ことで、使い勝手もさほど落ちていません。


「片手で使うには大きすぎ、両手で使うには小さすぎる」5.5インチという中途半端なサイズはそのままですが、「両手で使う」と決めてしまえば大きな問題ありません。ポケットにもなんとか入りますし。通勤途中など、片手で長時間スマホを使うと肩が凝るので逆によかったかもしれません。

ZTE Blade V7 Lite (Dual-SIM V0720)で豆腐発生。

DSCN1095

Android 6.0のスマートフォンを使ってみたくて、ZTE Blade V7 Lite(Dual-SIM V0720)を購入してみました。
国内未発売の香港モデル(?)をEXPANSYSで購入しました。送料込みで14,585円でした。

ちょっと失敗だったかもしれません。

  • 日本語書体のNotoSansJPが1ウェイトしか搭載されていませんでした。

Screenshot_20160702-105716

  • 太字は擬似ボールドで表示しているようです。
  • 容量は3.05MB。かなりの軽量なので、記号など、特定のグリフが割愛(※3)されているような気がします。
  • Webページの表示で文字化け(豆腐)がそれなりに発生します(※1)。

まもなく国内仕様モデルが発売される(※2)ので、素直にそちらを購入するべきでした。典型的な「安物買いの銭失い」です。


※1 実用上はさほど問題ありません。精神衛生上は最悪です。このサイトのサイト名など、欧文のBoldが豆腐化しています。
※2 日本法人の商品サイトを見ると国内版はカメラの画素数が少なめ、Band19に対応しているなど、それなりに仕様が異なります。日本語環境はしっかりチューニングしてあると期待します。


※3 フォントファイルを調べてみたところ、「NotoSansJP-Regular.otf」は、ラテン文字非格納CJK共通文字一部非格納でした。Webページの言語設定によって、豆腐化の発生具合は変わるようです。「lang="en"」に変更すると、欧文文字の豆腐化は発生しませんでした。あるいは、system/etc内の「fonts.xml」の記述(順序?)を変更すれば直る可能性はありますが、ファイルの修正にはroot権限が必要になります。


160808|追記 コメントにもあるように国内発売のモデルでも豆腐が発生しているようです。これはさすがにアップデータを出すだろう、と考えたいところです。できれば、全グリフが揃ったタイプのNotoSansJPに変更することで、ワールドワイドにアップデートしていただけると私の海外モデルも生き返るのですが、果たしてどうなることやら。

源ノ角ゴシックとNoto Sansをcssで指定

源ノ角ゴシック(Source Han Sans)とNoto Sans内のメタデータを調べたので、cssのfont-familyとしてあてがってみました。

源ノ角ゴシックとNoto Sansをcssで指定してみるテスト

◎確認するにはあらかじめフォントをインストールしておく必要があります。

Preferred Family(日・英の2つ)だけが「ファミリー」でフォントを命名していますが、それ以外はウェイト込みの名称となります。源ノ角ゴシックは「Normal」、Noto Sansは「Regular」を使用しました。

異なるnameIDに対して同じ命名(文字列)をしている箇所も多いので、実際には数個(源ノ角ゴシック:5個)で済みました。Noto Sansは言語別の命名をしていないのでさらに少なく(Noto Sans:3個)なります。

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

複数のOS、ブラウザで表示を確認してみていますが対応はバラバラです。昔からちっとも変わっていません。ざっくり調べてみたところ、

Macintosh Chrome:

  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • NotoSansJp-Regular(Postscript name)

Macintosh Safari:

  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • NotoSansJp-Regular(Postscript name)

Macintosh Firefox:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

Windows Crome:

  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

Windows IE11:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • Noto Sans Japanese(Windows用・Preferred Family)

Windows Firefox:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)

の記述が有効でした。ただし、「Preferred Family」が機能してもその際に表示されるウェイトはまちまちです。

ウェイト含めて意図通り表示させようとするとさらにブラウザごとの表示が変わります。

源ノ角ゴシックExtraLightとNoto Sans Thinをcssで指定してみるテスト

実際に使う際には、複数の名称を重ねる必要があります。また、ユーザーが源ノ角ゴシック/Noto Sansのどちらをインストールしているかはわからないので、両方とも記述する必要があります。エラーの発生する(が反応してしまう)指定を先に記述すると、意図する表示が実現しません。

さらに、Bold(<strong>タグ)の再定義も必要だと思います。

源ノ角ゴシックとNoto Sans

Adobeの源ノ角ゴシック(Source Han Sans)とGoogleのNoto Sansをダウンロードしてみました。

取り急ぎ、フォント情報を調べてみました。アプリ「OTEdit」を使っています。

源ノ角ゴシック Normal

Noto Sans JP Regular

字形は同じでも、フォント情報は全く異なるようです。マシンにインストールしても、それぞれ独立したフォントとして認識されます。

おや、「ファミリーネーム」にウェイト名称がついてしまっています。これでは各ウェイトが別のフォントとして認識されてしまうのではないでしょうか。

FontBookで表示してみました。

源ノ角ゴシック FontBook

Noto Sans FontBook

きちんと「ファミリー」で表示されています。
どの情報を使って、同じ書体群であることを認識しているのでしょうか。

以前の投稿、「游ゴシック体/游明朝体をWebで利用する」内で紹介した記事をもう一度確認するとわかりました。

フォントファイル内のメタデータ、「Preferred Family」と「Preferred Subfamily」を使ってフォントファミリーとウェイトを定義しているようです。

記事内で使われていたアプリ、「OTMaster」のLight版(無料)でメタデータを表示してみました。

源ノ角ゴシック OTMaster

Noto Sans OTMaster

「Preferred Family」はありましたが、「Preferred Subfamily」は定義されていません。「Subfamily name」はあるのでこちらで代替しているのでしょうか。

いずれにせよ、これらの書体が普及して、いろんなマシンにインストールされたとしてもcssのfont-familyで指定するのはちょっと難しいかもしれません。出来たとしても、トリッキーな記述になってしまう気がします。

GoogleあたりからWebフォントとして提供されるのを待つべきでしょうか。