7

現在のCSSでは欧文フォントは指定されていますが、和文フォントが指定されていません。
私は現在、UbuntuとChromeでこのサイトを閲覧しているのですが、フォントの指定がないためゴチック体と明朝体が混ざってしまい見づらいと思います。

参考: フォントカタログ・標準の日本語フォント

screenshot

1
  • 1
    どのフォントをしようすればいいと思いますか(Mac, Windows, Linuxのユーザーが全員使えるフォントがベストですね)。当社に任せたらなんとかしますが、提案があれば助かります。
    – jmac スタッフ
    Commented 2015年1月6日 23:52

5 件の回答 5

9

Windows 8.1でChromeを使っています。游ゴシックではweightが足りないのか、明るいディスプレイでは細くかすれて読みづらいです。

游ゴシックはWindows 8で同梱されてはいますが、デフォルトのUIフォントではない(デフォルトはMeiryo UIのまま)ので、馴染み深いという人は少ないと思います。

個人的にはブラウザでカスタマイズしたいので、serifなどgeneric指定のままがいいです。

リストページ-Yu Gothic
質問ページ-Yu Gothic

参考までに、インスペクタでCSSをいくらかMeiryoに置き換えてスクリーンショットを撮りました。

リストページ-Meiryo
質問ページ-Meiryo

6

テキストエリアが明朝体になってしまうのは、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;
}
1
  • ありがとうございます。デザインチームに送りました。
    – jmac スタッフ
    Commented 2015年1月22日 6:11
4

フォントが変わったことに興味をもち、ブラウザのインスペクタツールで確認しました。YuGothic が指定されていたのですね。

YuGothic は、OS X Mavericks と Windows 8.1 から搭載されたフォントだそうです。ただ、今までのCSSで日本語フォントが指定されていない状況では、ブラウザのデフォルトフォントが選択され読みやすかったです。メイリオ や ヒラギノ角ゴ ProN は以前から Windows や Mac OS X でそれぞれのプラットフォームで使われているフォントです。私は、利用者のプラットフォームにおいて親しみのあるフォントがよいと考えています。游ゴシック より ヒラギノ角ゴ ProN が妥当ではないでしょうか。

font-family: "Hiragino Kaku Gothic ProN", Meiryo, TakaoPGothic;
2

フォントの提案です。

font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, TakaoPGothic;
  • Mac: 游ゴシック, ヒラギノ角ゴPro
  • Windows: 游ゴシック, メイリオ
  • Linux: TakaoPゴシック
1
  • 「遊ゴシック」は「游ゴシック」だと思います。 Commented 2015年1月12日 12:02
1

新しいフォントをh2so5の提案で適用しました:

font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, TakaoPGothic;

当社の開発者やデザイナーが日本語のフォントに詳しくないため、改善余地はあると思います。

疑問点などあれば、ご教示ください。

3
  • 1
    generic指定がよいという意見が優勢になっています。個人的には、明朝体にならないような修正を入れれば、元のフォント指定 (英文の特定のフォントを指定したfont-family) に戻すのが現実的だと思います。明朝体になる件以外は元のフォント指定でとくに問題が出ていなかったのと、generic指定でデザインを調整する手間がかかりそうなためです。
    – ento モデレーター
    Commented 2015年1月21日 7:32
  • @ento 弊職はCSSの初心者のため、現在のCSSを何に変更するべきですか?
    – jmac スタッフ
    Commented 2015年1月22日 1:03
  • 私の案では 1. 今回のフォント指定の変更を元に戻す 2. こちらの回答の末尾に付けたCSSに変更する という手順になります。
    – ento モデレーター
    Commented 2015年1月22日 6:08

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。