（こちらは旧blogのコンテンツです）
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。アプリケーションFontForge、Glyphsなどを調べ始めています。
*1:OSXのSafariでは括弧類の挙動が変です。直後にリンクがあると特に文字詰めの崩れが激しいようです。バッドノウハウには関わりたくないのでとりあえず無視します。他にも制限・不具合はあるようで、こちらのページなどにもまとめられています。「文字詰め」の使い方 – TypeSquare Blog
*2:武蔵システムさんのサブセットフォントメーカーを使うとフォントが劣化する件 | つめもよう
*3:源ノ角ゴシック(Source Han Sans)をサブセット化したい時にやったことまとめ - フロントエンド開発Blog | オレには鈍器がある 無料ゲーム公式サイト
CSSとJavaScriptで文章をメモ書き風に - ウェブログ - Hail2u.net
