メイリオと @font-face と残念な描画

Pale Moon でも Firefox 同様に、メイリオのイタリック体がひどい描画になるケースに遭遇してしまったので、調べてみました。

見付けたのは mozilla のページ下部の関連情報のリンクなどの部分。

HTML と CSS を見てみたら、@font-face での指定が引き金になっている模様です。

テスト前の豆知識

font-family では、フォントファミリ名（英語やローカライズされた名称）かそれに類するファミリ名を指定し、@font-face の src: local() では、個別のフォントを Postscript 名かフルフォント名（英語のみ）で指定する、という決まりになっています。

これに沿った形で、確認してみました。

テスト

色々試してみたのですが、結果から遡って絞り込むと、こういうパターンになりました。

expected	各書体の italic	自動生成の oblique	指定の italic
指定方法	font-family	@font-face の normal	@font-face の italic
メイリオ	Meiryo	Meiryo	Meiryo Italic, Meiryo-Italic
Meiryo UI	Meiryo UI	Meiryo UI, MeiryoUI	Meiryo UI Italic, MeiryoUI-Italic
Consolas	Consolas	Consolas	Consolas Italic, Consolas-Italic

Meiryo UI は似たフォントファミリ名、Consolas はイタリック体（筆記体風）とオブリーク体（ただの斜体）との見分け用です。

表示テスト

@font-face でのマッチ失敗判別用に serif を追加しています。

メイリオ			Meiryo UI			Consolas
family	normal	italic	family	normal	italic	family	normal	italic
あ漢 Italic	あ漢 Italic	あ漢 Italic	あ漢 Italic	あ漢 Italic	あ漢 Italic	Italic	Italic	Italic

結果

手元のブラウザでは、こんな具合になりました。

local() のアンマッチ

先に serif のケースから。意図したローカルフォントでなく serif で描画されています。

どうやら Chromium 系の local() でのマッチングが独自仕様で、フォントファミリ名と照合している模様。

Postscript 名やフルフォント名と照合されないため、ローカルの Regular 以外のウェイトやスタイル等を @font-face で結び付けられません。言い換えると、Google Fonts の Open Sans:400i で、

@font-face {
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(...) format('woff2');
}

など指定されていても、Chromium 系ではローカルのフォントを拾えず、ほぼ常にウェブフォントになる、という事です。

ここで、普通に font-family で指定すれば済む、というのは別のお話。

日本語ページで馴染みのある Noto Sans JP だと、そもそもローカルインストール用の OTF 形式の Noto Sans CJK JP Regular とは異なる名前 Noto Sans Japanese Regular が指定されているので、ますます無駄な通信とテキスト表示の遅延や再描画を回避しにくくなっています。

NG

さて本命の NG のケース。ヒンティング・カーニング・ベースラインがおかしくなっています。

メイリオの @font-face の italic 指定では、ピンポイントにメイリオのイタリック体の存在が無視されて serif になっている上に、カーニングとベースラインがガタガタです。

イタリック体のない MeiryoKe_Gothic をメモ帳で斜体にしても、こんな酷い描画にはなりません。

ふと思いついて Regular を CSS で transform: matrix(1, 0, -0.3, 1, 0, 0) と傾けてみたところ、

平行四辺形	少し変形	1度回転
あ漢 Italic	あ漢 Italic	あ漢 Italic

同様の組み合わせで、同様の描画でした。共通しそうな GDI 以外の文字描画の手法と transform の変形処理の受け持ちを考えると、無効にしたつもりの DirectWrite での文字描画の可能性が思い当たります。

試しにしらいと氏の DirectWriteTester 1.01 でパラメータを変えて描画させてみると、

出ました。「漢」の字画の歪みの傾向が一致しています。発生条件は次の通り。

DWRITE_RENDERING_MODE1	`GDI_CLASSIC` or `GDI_NATURAL` or `NATURAL`
DWRITE_GRID_FIT_MODE	`DISABLED`

十分な解像度とスムージング処理を与えずにグリッドフィットを無効にしたら、……こうした傾向になるのは分かります。GPU のアクセラレーションが不可能なパソコンでは CPU の性能も期待できないから軽い方が良い、……そういうケースもある事でしょう。

でも、これほどプアな描画というのは、意図していない設定ミスのような印象を受けます。

終わりに

アウトラインフォントの PDF 文書の中で、唐突にビットマップフォントが表れるような、この違和感。

ソースを弄って改善できないか、またの機会に試してみたいと思います。