Chromeのフォントレンダリングが綺麗になっていた

Cinderella Girls Portalではフォントを少しでもデレステっぽくしたい&デフォルトはダサいという理由でウェブフォントを使うべく試行錯誤とブチギレを繰り返してきました。

Typekitは一長一短

で、最近学生版のAdobe CCを契約したのでTypekitを使ってみたんですね。

フォントの取り揃えはGoogle fontsの早期アクセスに比べれば格段に充実しています。(それはそう)

しかし、こちらはJavaScriptを使ったダイナミックキット(必要なグリフだけ抜き出すことにより軽量化したサブセット)を使ったりした関係でフォントの反映がワンテンポ遅れるというちっと残念なアレになっていました。

悲しい。

原点回帰 @font-face

原因はよくわかんねーけどまぁだいたいJavaScriptとかのせいじゃないかなというわけで、従来のCSSの@font-face規則を使おうと思いましたと。Typekit導入以前はGoogle fonts 日本語早期アクセス(こちらはCSSを読み込むタイプ)のM+を使っていましたが、面倒な一手間を加えないとWindowsから閲覧した際にフォントレンダリングが残念になるという問題点を抱えていました。

とりあえず今度は別のフォントを使ってみようということで自前のサーバーでフォントを持たせた上でそれを使う方法を試してみました。

今回採用したのは VL Pゴシック です。

VLゴシックはWOFF(Web Open Font Format)版と呼ばれる縮小されたウェブ向けのフォントファイルも配布されていましたのでこちらをサーバーに設置して使います。

@font-face {
    font-family: "VL PGothic";
    src: local("VL PGothic"),
        url('/fonts/VL-PGothic-Regular.woff');
}

このCSSコードでウェブブラウザ側に VL PGothic という名前でフォントファミリを定義します。

html{
    font-family: 'Open Sans', "VL PGothic", sans-serif;
}

使う時はこんな感じ。なんかこうCとかの#defineみたいな感じ(伝われ)

使った

綺麗に字が出ました!やったねたえちゃん!

さて盛大なフラグが立っておりますが、“立ったということは回収される”わけです。

Firefoxで開いてみます。

デデドン(絶望)

Firefoxで見ると以前は親の顔のように見た残念なフォントレンダリングが。

ということは、Chromeはこれまでの更新でフォントレンダリングが改善されていたということになります。これは素直に喜ぶべきことです。なんで気づかなかったんや。

さて、Firefoxとかの対応どうしよう…


余談 : CGP訪問者はどんなブラウザを使っているか

統計を取り始めた今年7月からの累計です。割合としてはChromeが6割と最多、次点にSafari、そしてFirefoxと続いています。Safari(in-app)というのはiOSアプリ内のブラウザのことですね。今月に限るとChromeが7割、次いでSafariが1割半、Firefoxは1割行かないくらいです。

Chromeの圧倒的人気がよくわかりますね…


補遺 : FirefoxでもWindowsじゃなけりゃ綺麗

画像は左から順に

  • Xubuntu(仮想マシン)上のFirefox Developer Edition
  • Windows上のFirefox Developer Edition
  • Windows上のGoogle Chrome Beta

でCGPで雪美ちゃんのページを見た際のスクリーンショットです。

フォントレンダリングがクソであると声高にしょっちゅう申しておりますがChromeにせよFirefoxにせよこれはWindows上の話です。実際にXubuntu上のFirefoxでは文字が綺麗にレンダリングされています。

今回はWindows上のブラウザはほとんどがフォントレンダリングがグズグズだったのが、Chromeはいつのまにか改善がなされていたという記事であって、LinuxやMax OS環境の場合どのブラウザでも大抵綺麗にフォントが見れています。特にMac OS。Retinaは化け物。Windowsがもともとフォントレンダリングがクソなのが諸悪の根源であってブラウザさんサイドはあまり悪者ではありません。

ちなみにWindowsでもフォントが綺麗に見えるブラウザはあります。Sleipnirです。


フォントレンダリングを独自のものを使っています。ぼくはUIがあまり好みでないので普段使いはしていません。ちなみにBlink(Cromiumベース)です。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です