最新OSで導入された字游工房の遊ゴシック体／遊明朝体を使ってfont-familyの日本語設定を見直してみる。
追記 (2014/02/26):
下記サイトで各ブラウザでの検証も含め、詳しく考察されています。素晴らしい。
CSSでのフォント指定について考える（2014年） by DTP Transitさん
OS X MavericksとWindows 8.1の游ゴシック体・游明朝体のfont-family名について by ゆめいろデザインさん
遊明朝体編
Windows環境待望のきれいな明朝体のはずが。。。
.serif { font-family: "游明朝", YuMincho, serif; }
やっぱ、ヒラギノの方がきれいなのでMacの場合はヒラギノ優先にする。
見出しなどポイントで使うことが多いと思うので太字を指定font-weight: bold;して使うといいかも。
.serif { font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, serif; }
8.1以外のWindowsの事も考える。Officeユーザーなら「HG明朝E」が入っているはず。
.serif { font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }
でも、遊明朝いらないわ＼(^o^)／
.serif { font-family: "Times New Roman", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }
遊ゴシック体編
とりあえず、表示を確認してみよう。
.sans-serif { font-family: "游ゴシック", YuGothic, sans-serif; }
うーん、細い。読みにくいのでヒラギノとLucida Grandeを合成してみる。
.sans-serif { font-family: "Lucida Grande", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; }
やっぱり、最終的にこうなった(TдT)
.sans-serif { font-family: 'Lucida Grande', 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", 'メイリオ', Meiryo, sans-serif; }
おまけ
Verdana/Helvetica推しの方は
.sans-serif { font-family: Verdana, Arial, 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif; }
Windowsでヒラギノ入ってたらどうすんの？とかいう変わりもの方は
.sans-serif { font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', "ＭＳ Ｐゴシック", 'MS P Gothic', sans-serif; }
コンパクト版（えっ？）
.sans-serif { font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; }
.serif { font-family: 'Hiragino Mincho ProN', serif; }
追記 (2014/02/26):
印刷したらキレイ。
@media print {
.serif { font-family: "游明朝", YuMincho, serif; }
.sans-serif { font-family: "游ゴシック", YuGothic, sans-serif; }
}
参考＆メモ
第10回：Windowsフォントをアンチエイリアスでキレイに見せる方法 [C!]
http://creazy.net/2007/08/windows_anti_alias.html
font-familyはこのCSSを使って頂けるととってもありがたいんですよね【css】 | ﾎﾎ冢次男
http://hayashikejinan.com/webwork/116/
CSSのfont-family指定はこれで決まり！（2013春） - 遠近法ノート
http://d.hatena.ne.jp/n-yuji/20130225/p1
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
游明朝体・游ゴシック体のCSSでの利用 - Qiita
http://qiita.com/shinnn/items/5be7e8106189311559c1
游書体をCSSで指定しよう - Qiita
http://qiita.com/llsmrsll/items/f019b8daadf798066001
Azami's Scrapbook - A 2014 edition Japanese（日本語） CSS font-family Set up
http://g-azami.tumblr.com/post/76447906591/a-2014-edition-japanese-css-font-family-set-up
Stack Stack! | 本文ゴシック体のCSSフォント指定（日本語/欧文 font-family）再考。Mac, Win, iOS, Android 対応
http://stack3.com/web-design/css_font_family_body.html
font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう | Culture27
http://www.culture27.com/blog/2011/12/font-family
さらばMS ゴシック／MS Pゴシック！ Windows版Google Chromeできれいなフォント表示を実現する - takepierrot Editor Note
http://takepierrot.hatenablog.jp/entry/20120107/1325907236
Google ChromeでＭＳ ＰゴシックをArial+メイリオに置換する - Weblog - Hail2u.net
http://hail2u.net/blog/software/replace-ms-pgothic-with-arial-plus-meiryo-in-chrome.html
Webデザイナーも要注目。Windows 8.1をインストールしてみた！ - ゆめいろデザイン :: フリーランス レスポンシブデザイナー・モバイルUXデザイナー（Webデザイナー）
http://yumeirodesign.jp/blog/201306/windowblue_preview.html
OS X MavericksとWindows 8.1の游ゴシック体・游明朝体のフォント情報について - ゆめいろデザイン :: フリーランス レスポンシブデザイナー・モバイルUXデザイナー（Webデザイナー）
http://yumeirodesign.jp/blog/201310/yu-name.html
CSSでのフォント指定について考える（2014年） - DTP Transit（Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント）
http://www.dtp-transit.jp/misc/web/post_1881.html
Azami's Scrapbook - A 2014 edition Japanese（日本語） CSS font-family Set up
http://g-azami.tumblr.com/post/76447906591/a-2014-edition-japanese-css-font-family-set-up
OS X MavericksとWindows 8.1にプロフェッショナル用書体の游ゴシック体と游明朝体が標準搭載 - フォントブログ
http://blog.petitboys.com/archives/yugothic-yumincho-jiyukobo.html
SCREEN｜ヒラギノとMac OS Xのバージョン相関表
http://www.screen.co.jp/ga_product/sento/support/otf_ver_hiragino.html