現在のCSSでは欧文フォントは指定されていますが、和文フォントが指定されていません。
私は現在、UbuntuとChromeでこのサイトを閲覧しているのですが、フォントの指定がないためゴチック体と明朝体が混ざってしまい見づらいと思います。
5 件の回答
Windows 8.1でChromeを使っています。游ゴシックではweightが足りないのか、明るいディスプレイでは細くかすれて読みづらいです。
游ゴシックはWindows 8で同梱されてはいますが、デフォルトのUIフォントではない(デフォルトはMeiryo UIのまま)ので、馴染み深いという人は少ないと思います。
個人的にはブラウザでカスタマイズしたいので、serif
などgeneric指定のままがいいです。
参考までに、インスペクタでCSSをいくらかMeiryoに置き換えてスクリーンショットを撮りました。
テキストエリアが明朝体になってしまうのは、textarea
のフォント指定が monospace,serif
で終わっているためだと思います。
textarea {
font-family: 'Droid Sans Mono',Consolas,Menlo,Monaco,Lucida Console,\
Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,\
monospace,serif
}
その場合monospace,sans-serif
に変更するとゴチック体に揃うと思います。また、この変更をしない限り、和文フォントを指定していても、該当フォントがない環境では不揃いなままになります。
monospace,serif
になっているのはブラウザ間のフォントサイズの算出方法の違いを吸収するための回避策で、同じ回避策を適用しているWikipediaではmonospace,sans-serif
としているので、この変更によるデグレはないはずです。
(和文フォントを指定することに反対する意見ではありません。)
変更すべき箇所:
code,
pre,
.suggested-edit .body-diffs .full-diff .content,
#revisions .markdown-diff .full-diff .content {
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
}
textarea {
font-family: 'Droid Sans Mono',Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
}
フォントが変わったことに興味をもち、ブラウザのインスペクタツールで確認しました。YuGothic が指定されていたのですね。
YuGothic は、OS X Mavericks と Windows 8.1 から搭載されたフォントだそうです。ただ、今までのCSSで日本語フォントが指定されていない状況では、ブラウザのデフォルトフォントが選択され読みやすかったです。メイリオ や ヒラギノ角ゴ ProN は以前から Windows や Mac OS X でそれぞれのプラットフォームで使われているフォントです。私は、利用者のプラットフォームにおいて親しみのあるフォントがよいと考えています。游ゴシック より ヒラギノ角ゴ ProN が妥当ではないでしょうか。
font-family: "Hiragino Kaku Gothic ProN", Meiryo, TakaoPGothic;
フォントの提案です。
font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, TakaoPGothic;
- Mac: 游ゴシック, ヒラギノ角ゴPro
- Windows: 游ゴシック, メイリオ
- Linux: TakaoPゴシック
新しいフォントをh2so5の提案で適用しました:
font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, TakaoPGothic;
当社の開発者やデザイナーが日本語のフォントに詳しくないため、改善余地はあると思います。
疑問点などあれば、ご教示ください。
-
1generic指定がよいという意見が優勢になっています。個人的には、明朝体にならないような修正を入れれば、元のフォント指定 (英文の特定のフォントを指定した
font-family
) に戻すのが現実的だと思います。明朝体になる件以外は元のフォント指定でとくに問題が出ていなかったのと、generic指定でデザインを調整する手間がかかりそうなためです。– ento モデレーターCommented 2015年1月21日 7:32 -
-