OS にあわせた font-famiry を PHP または、JavaScript で適用する

概要

閲覧者の環境に合わせて font-famiry を適用するための JavaScript および、PHP です。

Windows Vista 環境にはメイリオを、Windows XP や Windows 2000 などの環境にはＭＳＰゴシックを、Mac 環境と Windows の Safari にはヒラギノを適用します。サーバに依存しない JavaScript 版と、クライアントに依存しない PHP 版を作ってみました。

環境の振り分けは基本的に UserAgent の文字列で判断していますので、UserAgent の文字列が偽装されている場合には無効になります。

JavaScript 版の動作確認用の demo
JavaScript 版ダウンロード
PHP 版の動作確認用の demo (JavaScript 版よりおすすめです。)
PHP 版ダウンロード (ダウンロード後、ファイル名の拡張子から .txt を削除し、拡張子が .php となるようにしてください。)

説明

OS を振り分けるための UserAgent の文字列の基準は以下の表のようにしました。

適用したいフォント	プラットフォームトークン	プレットフォーム
ヒラギノ	Macintosh または Mac_PowerPC	Macintosh
メイリオ	Windows NT 6.0	Windows Vista
ＭＳＰゴシック	Windows NT 5.2	Windows Server 2003; Windows XP x64 Edition
	Windows NT 5.1	Windows XP
	Windows NT 5.01	Windows 2000, Service Pack 1 (SP1)
	Windows NT 5.0	Windows 2000
	Windows NT 4.0	Microsoft Windows NT 4.0
	Windows 98; Win 9x 4.90	Windows Millennium Edition (Windows Me)
	Windows 98	Windows 98
	Windows 95	Windows 95
	Windows CE	Windows CE

また、Safari には Windows もあるので、Windows の Safari にも Mac と同じスタイルを適用するようにしました。

JavaScript 版

JavaScript 版はサーバの環境に依存せずに実装が可能です。閲覧者の環境に合わせて CSS のルールにベースとなるフォントのスタイルを追加する仕組みです。

ダウンロードした basefont.css.js をテキストエディタなどで開き、fontRule の箇所を編集してください。書き方は通常の CSS の宣言と同じです。

basefont.css.js のデフォルトの状態は、サンプルがわかりやすくなるように背景を指定していますので background の箇所は削除してください。宣言部分 (プロパティと値) の書き方は CSS と同じです。

	fontRule : {
		hiragino  : "font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif; background:url(img/bg_hiragino.png);",
		msPGothic : "font-family:'ＭＳ Ｐゴシック','MS P Gothic',sans-serif; background:url(img/bg_ms-go.png);",
		meirio    : "font-family: 'メイリオ',Meiryo,'Segoe UI',sans-serif; background:url(img/bg_meiryo.png);"
	},

ここで設定した CSS の宣言が適用される CSS のセレクタは html body{} として、詳細度を少し高くしルールに追加しています。

<head> 内などでダウンロードした basefont.css.js を読み込んでください。

PHP 版

PHP 版はクライアント (Web ブラウザ) の環境に依存せずに CSS を適用することが可能です。閲覧者の環境に合わせて CSS ファイルを PHP で吐き出す仕組みになっています。なので、link要素で読み込んだり、@import を使って読み込んだりと通常の CSS ファイルと同じように扱うことができます。

basefont.css.php のデフォルトの状態は、CSS のセレクタを html body{} のようにし、詳細度を少しだけ高くしています。

if (preg_match("/Macintosh|Mac_PowerPC|AppleWebKit/",$ua)) {
	echo "body {font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;}";
}
else if (preg_match("/Windows NT (4|5)\.\d+|windows (98|95|CE)/",$ua)) {
	echo "body {font-family:'ＭＳ Ｐゴシック','MS P Gothic',sans-serif;}";
}
else if (preg_match("/Windows NT (6)\.\d/",$ua)) {
	echo "body {font-family:'メイリオ',Meiryo,'Segoe UI',sans-serif;}";
}
else if (preg_match("/Windows/",$ua)) {
	echo "body {font-family:'メイリオ',Meiryo,'Segoe UI',sans-serif;}";
}

ダウンロードした basefont.css.php を CSS ファイルとして読み込んでください。

link 要素で読み込む場合は

<link rel="stylesheet" type="text/css" href="css/basefont.css.php"/>

@import で読み込む場合は

@import "css/basefont.css.php";

のようになります。

参考にしたドキュメント

トラックバックURI

http://www.yomotsu.net/lab/javascripts/basefont/trackback

hokaさんからのコメント

2008年6月5日 21:59

おぉ、ありがとうございます。javascript版もいいですけど、PHP版がシンプルで素敵ですね！
WindowsのSafariはデフォルトがTimes New Romanなのでそういう設定でもいいかなぁとか思ってます。その辺の調整もこれだとお手軽ですね！
これで僕の憂鬱も解消されそうです。

adminさんからのコメント

2008年6月10日 11:52

hoka さん

こちらこそ、勝手に作らせていただいてしまってコメントまでいただき、ありがとうございます。自分は、PHP はよくわからなくて、hoka さんのほうが詳しいと思うので、もし気になる部分があったら hoka さん流に改良していただけるとうれしいです。

Windows の Safari って Times New Roman だったんですね…しらなかったです。勉強になりました!! 参考にさせていただきますねー。

Yoshikiさんからのコメント

2008年7月20日 0:51

見ていて気づいたのですが、CSS のＭＳＰゴシックの英語表記は、MS P Gothic ではなくて、MS PGothic だと思うのですが…

adminさんからのコメント

2008年7月22日 22:23

Yoshiki さん

こんにちは。ご指摘ありがとうございます。

確かにその通りですね!修正させていただきます。ありがとうございました。

コメントフォーム

実験室に戻る

このページの目次