2014年9月1日その他フォントファミリーの指定は、初心者が『むむむ』と思うことが多いですよね。書式自体は難しくないし、簡単に変更できるけれど、参考にした書籍やサイトによって、フォントファミリーの指定内容にバラ付きがあるし、同じ種類、同じバージョンのブラウザを使っていても、OSのバージョンが違っていると、表示される書体が違っていたりする。固定ページ『WordPressのお勉強』の記事でも、フォントファミリーの設定変更が出てきました。指定の仕方そのものに関わる部分は、固定記事としてアップしますが、フォントに関する予備知識を補足しておきたいと思います。フォントファミリーの指定は違うのに下の図を見比べてみると、フォントファミリーの指定が違うのに、同じように表示されているのが分かると思います。Pゴシック『sans-serif』は、Webサイトのフォントをゴシック体で表示するときに用いられます。ゴシックと言われる書体はたくさんありますよね。『具体的には、どんな書体を表示するんだ?』と疑問に思う方もいるはずですが、一概には返答できません。その疑問に答えるためには、OSやブラウザの種類やバージョンが関係しているからです。そもそも、ブラウザをはじめ、アプリケーションは、OSありきのソフトウェア。そのため、とくにフォントを追加する機能を持つソフトウェアを追加インストールしない限り、PC上で使用できるフォントはOSがサポートしているものに限られます。自分のPCがサポートしていない書体は、ブラウザ上でも表示できないということですね。PCで使えるフォントに違いがあるということがピンと来ない方のために、こんなお話を。書体って値段が高いですよね~。HomeエディションのPCが百万の桁を数えるなんて状況もあったんです。『どんな状況だよ?』と失笑する方もいると思いますが、零細企業を舐めてはいけません。印刷屋さんには写植機がつきものだったわけですが、時代の流れで個人商店のような印刷屋さんでもPCを導入する時代が到来しました。XPが登場したころには、時代に対応した設備を導入したほうが良いという状況も生まれると想像するのは容易いでしょう。PCが普及する前から、印刷業を営んできたAさんは、写植機が使えても、PCを使ったことがない世代のオッサン。業者にお願いして一式揃えて貰いましたが、町の印刷屋さんの経営は厳しい時代。設備投資だって、金に糸目をつけないなんてことはできない。Professionalでさえなくなってしまう。見てきたかのようにお話していますがが、私は身内に町の印刷屋さんがいて、本当に見たことがある事実です。PC自体は、ふつうのPCです。印刷業は多くの書体が必要になりますから、OSが標準でサポートしている書体では商売になりません。それはあくまで、OSを開発している会社が、PCを特別な環境で使わない一般ユーザーのために用意した書体なんです。商売で使うため、さまざまな書体を導入すれば、ライセンス料を支払うことになります。専門業者が使う書体ですし、特殊なものもありますから、価格もかさんでしまう。Pゴシックそんなことを知ると、『MSゴシック』、『MS明朝』といったように、マイクロソフトのゴシック書体、マイクロソフトの明朝体なんてもの存在する理由にも察しがつくと思います。日本語フォントのMSゴシックやMS明朝は、リコーが米国Microsoftとともに開発したもので、Windows3.1ではじめて搭載されました。OSも、巷に存在する、さまざまな種類の書体を、かってに搭載してよいわけではないのです。そのため、フリーライセンスで使用できる書体や、自分たちが開発した書体を利用しています。Pゴシックの違いは、文字の幅が等幅か、P(プロポーショナル)かの違いです。P明朝が使われる場面が多いです。どんなOSでも、時代の流れとともに新しいフォントが出てくるので、ブラウザ上で標準とされるフォントも、OSやブラウザの種類、バージョンによって変更されることになります。OSにインストールするマイクロソフトOfficeにも、さまざまなフォントがバンドルされています。Officeをインストールしている場合、基本的にWindowsで使われているフォントが使用できる環境になります。上図は、WordPressの『TwentyFourteen』というテーマ(テンプレート)のデフォルトのフォントファミリーの指定です。いう東欧のデザイナーが作成し、フリーラインセンスとして利用されることになった書体と、『sans-serif』が指定されています。いえば、Latoは欧州フォントですから、日本語フォントには適用できない。そのため、ブラウザ(OS)が、『sans-serif』と設定している標準フォントで表示されているのです。chromeバージョン36の環境で取りました。Pゴシックで表示されている。P明朝』が指定されています。P明朝で表示されます。serif指定の例つまり、最低限serifかsans-serifを指定しておけば、サイトの文字を明朝体か、ゴシック体かを指定することはできるわけです。実際に、どんな書体が使われるかは、自分が使用しているOSとブラウザによって標準フォントの設定が違っているということですね。serifも、sans-serifも指定していない場合はどうなるかといけば、これもOSとブラウザによって表示される書体が違います。無指定だった場合、この標準フォントで表示するという設定も、OSとブラウザによって、あらかじめ定義されています。仮に、二人のユーザーがいて、一人はWindowsユーザー、一人はMacユーザーだったとします。chromeを使っているユーザーでも、WindowsとMacでは指定されている標準フォントが違う。serif、sans-serifを指定した場合も、無指定だった場合も、ブラウザに表示される書体が違いが生じるのです。OSのバージョン違えば、同じバージョンのブラウザでも表示に違いが出ることもある先ほども触れたように、sans-selfという指定は『ゴシック体で表示』というファジーな指定です。Pゴシックになります。8.1でIEのバージョン11を使えば日本語フォントはメイリオという書体になります。いえば、『同じ種類、同じバージョンのブラウザを使っているのに、OSのバージョンによってフォント表示が違うのは納得いかない』という内容のブログを見かけたことがあります。確かに、OSが何なのかということが、今一つわかっていないと、そういう感想も生まれるのかもしれませんね。『今さら人に訊けないPC基礎』でも、ちらりと書いていますが、ことマルチタスク環境以降のアプリは、OS依存度が大変高いソフトウェアなんです。アプリに対するOSの制御が強くないと、複数のアプリケーションを1台のPCで実行するという環境は実現できません。アプリはOSと連携して動作していますから、OSの影響を多分に受けます。ユーザーにとっては同一のアプリケーションであっても、OSの内部構造が違えば、アプリに対するOS側の処理が違っても仕方ない。ブラウザといっても何種類もありますし、そのバージョンのOSがサポートしている過去のソフトウェアと、新しいバージョンがサポートしている過去のソフトウェアも異なっている場合もあり、互換性の問題もあります。そのため、新しいOS側の環境にすべて揃えられるとは限りません。同じ種類の同じバージョンのブラウザであっても、実際にアプリが動作する環境を整えているのはOSですから、OSごとに最適と判断された標準フォントが違ってしまうというケースもあるのです。このように、Webページを製作するとき、製作者が具体的にフォントファミリーを指定していない場合に表示される標準フォントは、OSとブラウザの種類とバージョンの組み合わせ次第で違いが出ます。任意のフォントファミリーの指定例Webサイトのデザインをするにあたり、いくつものフォントファミリーが指定されているのは、Webサイトを見る側のユーザーのPCが、OSの種類やバージョン、ブラウザの種類やバージョンが異なるからです。表示されたときに、製作者がイメージするデザインにあった書体で表示されるように指定しています。サイト上のフォントは、メイリオで表示されることになります。Vista以降のOSに標準搭載された日本語フォントです。メイリオという名称は『明瞭』にちなんでいると言われています。このフォントはライセンス販売されているため、メイリオが搭載されていないシステムに組み込んで使うことも可能です。Officeにもバンドルされているため、Officeの影響で他のOSでも使えるという環境もあります。『BIOS/UEFI(EFI)』って何だ?関連コンテンツよろしくお願いします(*^_^*)訪問ありがとうございます。