フォントファミリーの指定は簡単だけど難しい

さて、前回の続きです。
フォントファミリーの指定は、初心者が『むむむ』と思うことが多いですよね。もちろん書式自体は難しくないし、簡単に変更できるけれど、参考にした書籍やサイトによって、フォントファミリーの指定内容にバラ付きがあるし、同じ種類、同じバージョンのブラウザを使っていても、OSのバージョンが違っていると、表示される書体が違っていたりする。

どうして、フォントファミリーの設定に、ブラウザだけでなくOSまで関係しているのかという話は、ブログ記事『OS、ブラウザ、フォントファミリーの気になる関係』で書いておきました。こちらの記事にしてしまうと、カスタマイズのお話が遠のいてしまうので、番外編としてまとめています。OSとブラウザ、フォントファミリーの関係が、今一つ分からないという方は、そちらの記事を参照していただければと思います。

フォントファミリーの書式
前回、スタイルシートには、こんな設定をしました。

任意のフォントファミリーの指定例
任意のフォントファミリーの指定例

 

/****** 基本のフォント設定 ******/
body,
button,
input,
select,
textarea {
color: #7d7d7d;/* フォントの色 */
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3′, Meiryo, ’メイリオ’, sans-serif;/* フォントの種類 */
font-size: 14px;/* フォントサイズ */
font-weight: 300;/*フォントの太さx*/
line-height: 1.6;/*行の高さ*/

 

 どうして、フォントファミリーの名称はアルファベットと日本語を並べているのか?

ブラウザによっては、フォントファミリーについてアルファベット表記と日本語表記の一方しか解釈できないものもあり、両者を『併記しましょう』というお約束が生まれました。そのため、過去との互換性のために、アルファベットと日本語の名称双方を記述しているケースが多く、『Meiryo』、『メイリオ』といったふうに記述されるのです。

 

フォントファミリーの指定にも時代の流れがある

新しいフォントが登場すれば、そちらが主流になっていくという状況も生まれますから、記述されるフォントファミリーの内容は未来永劫、同じというわけではありません。そのため、参考にするため書かれた年が異なる記事を閲覧すると、こちらにはこのフォントが指定されているのに、こちらでは違っているという場合もあります。

また、今は日本語の名称を記述しない書式も見かけますよね。OSにもサポート期間があり、バージョンアップしますし、新しいOSで旧バージョンのブラウザを使い続けるという環境は一般的ではありません。それは、つまり、OSやブラウザが新しいフォントに対応できるということでもあります。そのため、個人的に自分のサイトを作っているような環境なら、10年20年前の環境まで気にする必要はなく、一般的な環境な環境を前提とするのなら、今の時代、日本語の表記名は必要ないと言われています。もちろん、ネットワークの深層部で古いシステムを稼動しているような環境なら、話は別、過去の遺物との互換性を重要視しなければなりません。これまで、問題なく稼動していたネットワーク上の、たった1台のサーバーの、たった1箇所に、新しい設定をしたことが原因で、予期せぬトラブルを引き起こす可能性もある。そういう環境のなら、古くからの設定を引き継いだほうが無難という状況も生まれますから。
とはいえ、実際は、マイナー派のブラウザもありますし、同じ種類、同じバージョンのOSやブラウザを使っていても、OSメーカーが配布した追加プログラムをインストールした環境、してない環境でフォントの処理が違うとか、特定のアプリケーションをインストールしたか、しないかで、使えるフォントに違いが出るとか、個々が使うPC環境も、同一ではありません。さまざまなことが原因で、フォントの処理が違ってしまうのなら、とりあえず、併記しておけば間違いないだろうと、併記されていることも多いのです。

 

シングルクォーテーションとダブルクォーテーション

フォントファミリーを指定するとき、シングルクォーテーションで囲まれている場合、ダブルクォーテーションで囲まれている場合、両者ともについていない場合の3パターンがあります。日本語表記のフォント名と、フォント名にスペースが含まれる場合は、シングルクォーテーションか、ダブルクォーテーションで囲むというルールがあるからです。一部、日本語表記の名称でも、符号をつけずに認識される場合もありますが、ルールに乗っ取っていれば問題ないので、私の例では『mairyo』と『sans-serif』の2つだけが無印になっています。

 

 フォントファミリーの指定順

親テーマのフォントファミリーの指定は、以下のようなものでした。

親テーマのスタイルシート
親テーマのスタイルシート

『Lato』は欧文フォント。Twenty Fourteenでは、特定の和文フォントの指定がありません。Windows環境では、『sans-serif』が指定されると、OSとブラウザのバージョンによって『メイリオ』か、『MS Pゴシック』が表示されます。フォント指定自体がない場合は、標準の和文フォントはMS Pゴシックです。『sans-serif』については、冒頭でご紹介したブログのほうで詳しく補足しています。

フォントファミリーは先に指定したほうが優先されます。そのため、子テーマのスタイルシートに

font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3′, Meiryo, ’メイリオ’, sans-serif;/

と、指定すれば、最優先されるのは『Lucida Grande』です。ただ、『’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3′』までは、Windowsが標準でサポートしていないフォントなので、Windows環境では無視されます。Windows環境なら、表示されるのはメイリオということですね。

『メイリオ』はWindows Vista以降に搭載されたフォントなので、とくにフォントに手を加えていないWindows XPでは、sans-serifが適用され、MS Pゴシックで表示されます。Vistaの発売後、Microsoftにより、XPにメイリオを任意でインストールできるプログラムが配布されましたから、XPでメイリオを表示できないとはいえないのですが、メイリオがサポートしれないWindowsでは、ブラウザ上でもメイリオは使えないということです。
逆に、Windows 95以降で初めて搭載されたMS Pゴシックは、それ以降に発売されたWindowsで利用できます。MS Pゴシックの登場当時から、Windows環境のブラウザの標準の日本語フォントに指定されてきたという長い歴史があります。ただ、メイリオのように、アンチエリアスで表示されないため、現在では、Windows環境だとメイリオのほうが好まれる傾向にあります。
アンチエリアスは、シャギーのようなギザギザ感を滑らかに見せる技術です。拡大した図を見ると、違いが明らかだと思います。

MSP ゴシックとメイリオを拡大
MSP ゴシックとメイリオを拡大

私は、MS Pゴシックを指定しませんでしたが、メイリオよりもMS Pゴシックを優先したいのなら、MS Pゴシックを指定する必要があります。というのも、たとえば、Widows8.1で、ブラウザがIEver11といった組み合わせでは、sans-serifに適用されるのがMS Pゴシックではなく、メイリオだからです。

このように、OSやブラウザとの兼ね合いで、Webサイトに表示されるフォントの種類が違ってしまうので、どんなときに、どんなフォントが表示されるかというお話は、ごちゃごちゃした印象になるんですね。
だから、『深いこと考えず、自分が優先したいフ書体を先頭から指定。和文フォントに関しては念のため日本語表示とアルファベット表示で名称を羅列しておけば間違いない』という結論に辿りつく人が多いのかも(*^_^*)。

 

Windowsのフォントが後方に指定されることが多いわけ

自分がメイリオを優先したいのなら、先頭にメイリオを指定してもいいです。でも、どの書体で表示するかは、サイトを作っている自分の自己満足である同時に、ページを読んでくださる方が読みやすいようにという配慮でもあります。

Windowsユーザーは、Windowsのフォントになれているように、MacユーザーはMac OSのフォントになれています。
Macユーザーさんはデザイナーさんなど、デザインに対してハイセンスな方も多いので、ビジネスライクな環境でPCを使ってきた人も多いWindowsユーザーに比べ、拘り派が多いのでしょう。色んなサイトを眺めていると、『メイリオで表示されるのは、イヤだ』的な記事を多く見かけます。
今は、Mac 用のMicrosoft Officeもあり、ビジネスソフトはMicro Officeも入れているという環境が珍しくありません。メイリオは、Officeにもバインドされているので、こうした環境だと、もともとはWindowsのフォントでも、Mac OSでも無視されないという状況になってしまう。そのため、Macユーザーに配慮して、Mac向けのフォント指定が先、Windowsのフォントは後方という指定をされる方が多いです。

長くなりましたので、続きは次回。
次回は、抜粋表示の『この記事の続きを読む』の修飾や、記事タイトル部分のフォント指定や修飾をしたいと思います。