Windows版ChromeでWebフォントを綺麗に表示させるためのメモ

   

Chrome38で、一部プラットフォームを除きSVGフォントのサポートが終了しました。
当記事で書かれている内容はバージョン38以降のChromeには反映されません。


Macと比べてフォントレンダリングが汚いと言われているWindowsの中でも、特にシャギシャギな通常版Google Chrome。

*Windows7/ClearType有効
*Firefox：ハードウェアアクセラレーション機能を使用する / direct2d.force-enabled=true / cleartype_params.rendering_mode=5 / directwrite.enabled=true / mozilla.widget.render-mode=6
*Opera:Enable Hardware Acceleration=2
*Chrome:ハードウェア アクセラレーションが使用可能な場合は使用する / --enable-lcd-text
*Chrome Canary:ハードウェア アクセラレーションが使用可能な場合は使用する / --enable-lcd-text / --enable-direct-write / --no-sandbox

そのフォント描画が、SVGフォントを使用すると改善される。

SVGフォントとはSVG(Scalable Vector Graphics)のfont要素を使用して定義されたフォントで、グリフ情報やカーニング量といったフォントの情報がすべてXML形式で記述されている。

CSSの記述例）
  1. @font-face {
  2. font-family:"Sawarabi Mincho";
  3. src:url("sawarabi-mincho-medium.eot");
  4. src:url("sawarabi-mincho-medium.eot?#iefix") format("embedded-opentype"),
  5. url("sawarabi-mincho-medium.woff") format("woff"),
  6. url("sawarabi-mincho-medium.ttf") format("truetype"),
  7. url("sawarabi-mincho-medium.svg#sawarabi-mincho-medium") format("svg");
  8. }
  10. /* Webkit用CSSハック */
  11. @media screen and (-webkit-min-device-pixel-ratio:0){
  12. @font-face {
  13. font-family:"Sawarabi Mincho";
  14. url("sawarabi-mincho-medium.svg#sawarabi-mincho-medium") format("svg");
  15. }
  16. }

▸▸テストページ


参考：
Smoother Rendering in Chrome | Fontspring
http://www.fontspring.com/blog/smoother-rendering-in-chrome-update

Smoother Rendering in Chrome [update] | Fontspring
http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

Fonts – SVG 1.1 (Second Edition) | W3C
http://www.w3.org/TR/SVG/fonts.html

Google Chrome Canary finally gets support for DirectWrite on Windows! | TechWhack
http://techwhack.co/google-chrome-canary-finally-support-directwrite-windows-49274/

〈