ブログ名の設定は、まだ。 ネット社会の一粒の"地の塩"でありたいと思っています。

改めて、Webページの日本語フォント指定について。

2014年07月08日 · カテゴリ:仕事ネタ

最近、Webページのフォント指定をしていないサイトがあって、いまさらどーしたものか考えていました。
とりあえず私もWeb制作業界の端っこに在席している身ですから。

そもそもの話、Webページにフォント(font-family)指定をしたからと言って、PCにそのフォントがなければ(無指定と同じで)Webページの表示はブラウザでデフォルト設定のフォントになってしまいますが、そのあたりを見越してHTML(CSS)ではフォント指定を複数、優先順に入れているわけです。

MSゴシックはWin3.1から入っていますし、MS PゴシックはWin95以降入っているもの。XPはシステムフォントとしてMS UI Gothicが採用されています。メイリオはVista以降のシステムフォントですが、XPには標準では入っていませんでした。

現在は、流れとしては画面の解像度が増したせいもあり、小さなノートPCでも左右1366pxといった解像度をもつ昨今、以前多く採用されていた12px程度の標準フォントサイズでは小さすぎ、14pxあたりに指定をUPされてきています。
また見やすいという理由でWindowsはメイリオを優先し、なければ(たぶんブラウザ指定の)MS Pゴシック。
Macであれば、ヒラギノ角ゴでしょうか。

ちょっと参考になった下記のブログでは、

CSSのfont-family指定はこれで決まり!(2013春)

結論として(欧文指定も含めて)、
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, Meiryo, sans-serif;
だけでOKという趣旨が書かれていました。

記事を読めば、なるほどなるほど、なぜそこまでスリムになったかが書かれていました。2013春とありますが別に内容は古くもなく、私も参考にさせていただきました。

ただMacの、Osakaは表示が汚いので不要という記述もありますが、見やすいという支持者もいるんですけどね。(ま、詳しくは上記サイトで)

さて、ちょっと元に戻りますが、Webページでフォントが無指定だったときどうなるか、ご存じですか?

答えは、ブラウザの設定に従います。
そのブラウザの設定をカスタマイズしている人は除いて、通常下記のようになっているはずです。

すべて私のWindows7のPCでの話ですけど。

■Google Chrome 35

Gchrome35

■Internet Explore 11

ie11

■Safari 5.1.7

safari5

■Firefox 30

firefox30

現状認識の意味でキャプチャーとってみましたが、こういう各ブラウザの設定状況が、無指定のWebページには反映されているわけですね。

あと、Macの場合はSafariユーザーが多いはずですが、Safari6以降でデフォルトが明朝体になっていて、しかも設定でフォント変更ができないという話も(近場のMacユーザーから)聞いています。

要はcss(スタイルシート)ファイルをわざわざ作って、設定でそれを選択させないと変わらないとか。
プロでもない人にもそれをやらせるように考えるSafari(Mac版)ってなんなの?って感じですが、明朝体が嫌なら変える方法は
Safariのデフォルトのフォントスタイルを明朝からゴシックに変更する方法
などに書かれていました。

(2014.07.25追伸を修正)
Webフォントについて今回は触れませんでしたが、機会をみて導入にまつわる記事を書きたいと思います。
なお、現在このサイトはフリーフォントをWebフォントとして(PC用のページのCSSに指定したのでPC画面に限りますが)テスト的に使用しています。

« 1つ古い記事:

1つ新しい記事: »

Leave a Reply

Trackback URL

記事テーマと関係ないとか、リンクがない場合(一方的TB)、あとアダルトサイトは申し訳ないですが承認しませんので予めご了解ください。またrel="nofollow"つけてるので、SEOのリンクジュースが目的のコメント、TBは残念ながら効果が無いと思います。予めご承知おきください。