Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)


  • 公開:
  • 更新:
  • 編集:
概要 ▶ 日本語のWebフォントはブラウザーによってはキレイ(滑らか)に見えないこともあります。、滑らかさを出せるCSS設定を紹介します。

20160212-Webフォントを滑らかにするCSS-00

目次



●ブラウザーによってWebフォントの見え方が違う

今更ですが、日本語のWebフォントを会社のサイトで使い始めました。


元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォント - Wikipedia(Webフォント - Wikipedia)


意外と導入は簡単で、そんなに読み込みが重く(遅く)感じることは少ない気がします。

ただ、WebフォントはモリサワのTypeSquareを使っていますが、ブラウザーによって見え方が結構違うのだなと感じました。


Windowsのブラウザーでは、ざっくり言うと、

  • Internet Explorer 11:キレイ
  • Edge 13:そんなにキレイではない
  • Chrome 48:そんなにキレイではない
  • Firefox 44:そんなにキレイではない

と、こんな感じです。

※EgdeはEdgeHTMLのバージョン。ブラウザーのバージョンは25。


意外にもInternet Explorer 11はそのままでOKです(笑)。逆に純正のEdgeはまだ発展途上のためか、そんなにキレイではありません。

●各ブラウザーの実際の画面で見え方をチェック

各ブラウザーで実際の画面を見てみましょう。画面は「Yoshida Policy 『世界で一番ムダの無い印刷会社を目指して。』」から。

本文のフォントは「リュウミン R-KL」で、太字部分は「リュウミン B-KL」、フォントサイズは17pxです。

画像はクリックすると拡大されます。

20160212-Webフォント-IE11-01 20160212-Webフォント-Edge-01

20160212-Webフォント-Chrome-01 20160212-Webフォント-Firefox-01

見てみると結構違いますよね?

これは少し困ったなと感じたので、Webフォントが滑らかに表示される方法を調べたら、まとめて書いてあったページがあったので、自分で試してみて、オススメできるプロパティ・値を紹介します。なお、今回の対象はWindowsです。



●font-smooth

font-smoothというフォントのアンチエイリアスを制御するプロパティがあります。

このCSSが紹介されていて、どのブラウザーで使用できるのかをCan I useのサイトで調べてみると、Firefox・Chrome・Safariなどで使用できるようです。


しかし、注釈(Notes)よく見てみると、全部対応がMacだけ!

Macはだいたいキレイだから問題ないでしょう。問題はWindowsなのに…。

20160212-Webフォントを滑らかにするCSS-01

なので今回は未検証(対象外)。


●-webkit-font-smoothing

先のCan I useの「font-smooth」のNoteに書いてありますが、「-webkit-font-smoothing」はMacしか動作しないので、今回は未検証(対象外)。

GitHubに記事を書いた人は、なぜタイトルにWindowsを入れたのか謎…。



●transform: rotate(0.001deg)

少しだけ要素を回転することで、文字を滑らかに表示させます。

先のサイトだと「-0.0000000001deg」と非常に小さい角度になっていましたが、私の環境ではあまりにも小さな角度だとフォントが滑らかになりませんでした。

なので、実際に試してみた値としては、次の値をオススメします。

transform: rotate(0.001deg);

EdgeとFirefoxはこれだけでフォントのアンチエイリアスがキレイに掛かって十分です。


ただし、Chromeに関しては、0.001degだと効果を適切に発揮できないので、0.05degをオススメします。

transform: rotate(0.05deg);

GitHubに記事を書いた人は、なぜあんなに小さな数値を入れたのか謎…。



●text-shadow: 0 0 0.1px rgba(0,0,0,0.5)

テキストにわずかに影を付けてアンチエイリアスっぽい効果を出すテクニック。

このテクニックは、このブログでも以前に紹介しましたね。


このテキストに影を付けるテクニックは効果がありますが、文字がぼやけて少し太ったようにみえるのが弱点。あまり使いたくないテクニックです。

EdgeとFirefoxでは、先のtransformの回転によるアンチエイリアスを適用すれば、文字は十分にキレイだったので、ChromeだけこのCSSが適用されるようにすることをオススメします。


「transform: rotate(0.05deg);」と合わせて、Chromeにだけ適用するにはJavaScriptを使います(今回はjQueryも)。

コードはGitHubにも掲載されていますが、修正しています。

修正点は文字のサイズによって太らせる幅を調整する部分の削除と、Chromeの判定ルーチンの修正です(Edgeはnavigator.userAgentにChromeという文字を含むので除外するようにした)。

$(function(){
    // Windows版ChromeのWebフォントを多少キレイに表示する(影を付ける)
    // Techniques for Anti-Aliasing @font-face on Windows ・ GitHub
    // https://gist.github.com/dalethedeveloper/1846552
    var shadowify = function (e) {
        var color = $(e).css('color')

        // Got Hex color?  Modify with: http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-jquery
        if ( color.search('rgb') == -1 ) {
            return;
        }
        var rgba = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
        $(e).css('text-shadow', '0 0 0.1px rgba('+rgba[1]+','+rgba[2]+','+rgba[3]+',0.5)');
        $(e).css('transform', 'rotate(0.05deg)');
    }

    if ((navigator.platform.indexOf('Win') != -1) && (navigator.userAgent.match(/chrome|opera/i)) && !(navigator.userAgent.match(/edge/i))) {
        $("p").each(function(){shadowify(this)});
        //^ Your appropriately targeted list of elements here ^
    }
});


今回の本文の文字のカラーは「#333333」だったので「text-shadow: 0 0 0.1px rgba(51,51,51,0.5);」となります。

GitHubの記事の値のままだと、密度の高い日本語Webフォントには向かないので、影のぼかし幅と透明度を調整しています。



●CSSを適用した状態で各ブラウザーの実際の画面でチェック

最終的には以下のCSSを本文の段落(pタグ)に割り当てました。

  • 全ブラウザー→ transform: rotate(0.001deg);
  • Chromeだけ→ transform: rotate(0.05deg); text-shadow: 0 0 0.1px rgba(51,51,51,0.5);


実際の画面で比較してみましょう。

20160212-Webフォント-IE11-02 20160212-Webフォント-Edge-02

20160212-Webフォント-Chrome-02 20160212-Webフォント-Firefox-02

結構キレイになったと思いませんか?

Chromeだけは、色々調整してみましたが、なかなか難しくて現在でも納得はしていませんが、初期の状態よりは良いかなと思っています。(Chromeは以下のリンクで紹介している「-webkit-text-stroke: 0.2px」の方だけの方がキレイかも…)


Macで制作していて日本語Webフォントを使用される方は、Windowsのブラウザーに注意が必要かもしれませんね。

それでは、よいWebフォントライフを。



●このブログ内の関連ページ



●参考にしたページ



●サンプル画面として使ったサイト



●この記事へのネットの反応まとめ

次のページにて書ける時に随時更新します。

カテゴリー:

このページをぜひシェアしてください