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

ウェブフォント

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

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

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

テスト前の豆知識

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

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

テスト

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

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

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

表示テスト

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

メイリオMeiryo UIConsolas
familynormalitalicfamilynormalitalicfamilynormalitalic
あ漢 Italicあ漢 Italicあ漢 Italicあ漢 Italicあ漢 Italicあ漢 ItalicItalicItalicItalic

結果

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

結果

local() のアンマッチ

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

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

Postscript 名やフルフォント名と照合されないため、ローカルの Regular 以外のウェイトやスタイル等を @font-face で結び付けられません。言い換えると、Google FontsOpen 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 をメモ帳で斜体にしても、こんな酷い描画にはなりません。

メモ帳での MeiryoKe_Gothic 斜体

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

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

CSS で transform

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

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

DirectWriteTester での描画

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

DWRITE_RENDERING_MODE1GDI_CLASSIC or GDI_NATURAL or NATURAL
DWRITE_GRID_FIT_MODEDISABLED

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

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

終わりに

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

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

コメント

タイトルとURLをコピーしました