ローカルで生きている環境がWindows XP+Internet Explorer(以下IEと略)6.0マシンが2台、Mac OS X、OS9が各1台あるので、各OS、ブラウザ、バージョンによって見え方にあまり違いが生じないように吸収しているつもりですが、Windows Vista+メイリオはたまに外出先でチェックしながら修正するだけなので、いまひとつ対応がしきれない状況でした。

現在のスクランブルエッグのIEユーザのうち、IE6は60%、IE7は37%です。時間とともにIE7の割合が増えていくことは歴然としています。

XPマシン2台のうち1台にWindows XP ServicePack3をインストールすることをきっかけにIE7もインストールし、さらにメイリオフォントも入れることにしました。

メイリオダウンロードの詳細 : Windows XP 向け ClearType 対応日本語フォント
http://www.microsoft.com/downloads/details.aspx?FamilyID=f7d758d2-46ff-4c55-92f2-69ae834ac928&DisplayLang=ja

自分の管理するサイトや以前、制作を依頼されたサイトをチェックすると、いろいろ問題点が発見されました。

今までは
Vista IE7 メイリオ
XP IE6 MS Pゴシック
でなんとかなりました(ほかのOS、ブラウザ、バージョンも考慮していますが、今回の記事の対象外ということで)。

今後は、

Vista IE7 メイリオ
XP IE7 メイリオ
XP IE7 MS Pゴシック
XP IE6 MS Pゴシック

の4パターンに対してフォローしていくとなると、「XP IE7 メイリオ」「XP IE7 MS Pゴシック」をどうやってCSSを振り分けるのかが実に大変なのです。MS Pゴシックとメイリオのフォントフェイスの違いは長年DTPをやってきた私のような人間にとっては放置しておくわけにいかない問題です。

もっとも、一番楽なのは「MS Pゴシック」優先指定をしてしまえばそれがいいに決まっています。でも、せっかく「メイリオ」で見たい人に、サイトをメイリオで見せようと思うと、いろんな壁が目の前に立ちはだかっています。

今まで使ってきたIE7専用のCSSハック
*+html
が、「XP IE7 MS Pゴシック」の環境にも効いてしまうため、せっかくのメイリオ対策がMS Pゴシックにも効いてしまって使えないのです。

じゃあどうするか。

いちばんいいのは、
1. ユーザのシステムフォントに『メイリオ』が存在しているかチェックし、
2. メイリオが存在していれば、メイリオ用のCSSを適用させる
という方法です。

果たしてそんなことはできるんでしょうか。
そんなことをやっている人はいるんでしょうか。

3時間Webで探しましたが、そのような情報は見つかりませんでした。

でも、まあなんとか力技で動かせることができるようになったので、ご参考までに記しておきます。きっともっといい方法があるはずなので、これをたたき台にして、どなたか、もっとスマートな方法をここのコメントや各ブログで発表していただければ幸いです。


■1. ユーザのシステムフォントに『メイリオ』が存在しているかチェック


http://www.lalit.org/lab/javascript-css-font-detect
ここにある、Get the JavaScript code 「here」をダウンロードし、fontdetect.jsとして保存する

参考:JavaScriptでマシンに特定のフォントがインストールされているか知る方法
http://phpspot.org/blog/archives/2007/03/javascript_46.html

■2. メイリオが存在していれば、メイリオ用のCSSを適用させる



(1) htmlのheadにfontdetect.jsを読み込む。
例:
<script language="JavaScript" src="fontdetect.js"
type="text/javascript"></script>

(2) htmlのbodyの先頭に次のコードを入れる

<script type="text/javascript">
<!--
var d = new Detector();
result = d.test("メイリオ");
if(result[3]==true){
var header = document.getElementsByTagName("head").item(0);
var style = document.createElement("link");
style.rel = "stylesheet";
style.type = "text/css";
style.href = "meiryo.css";
header.appendChild(style);
};
// -->
</script>

「meiryo.css」はメイリオ対策用専用CSSのことです。
相対パス、絶対パスいずれも使えるはずです。

参考:BODY内のスクリプトでHEADに<style>...>/style>を埋め込みたい。
http://q.hatena.ne.jp/1211732920

一応これで動いているんですが、きっともっといい方法があると思います。

Webに関する知識の資産は共有すべきだと思いますので、同じお悩みをお持ちの方へのたたき台ということで。

■メイリオのフォントメトリックス


DTPの世界ではフォントの規格・仕様のことを「フォントメトリックス」と呼んだりします。専門用語らしいので、検索してもあんまり出てきません。

メイリオはベースラインの下、いわゆるディセンダラインより下の空白を大きく確保しているので、MS Pゴシックはじめ一般の和文書体とはずいぶん違う作りになっています。

参考:Word 2003 または Word 2007 でメイリオ フォントを使用した場合に行間が大きく空く
http://support.microsoft.com/kb/929742/ja

参考:(メイリオ) 『ことば・その周辺』
http://okrchicagob.blog4.fc2.com/?tag=(%A5%E1%A5%A4%A5%EA%A5%AA)

Photoshopでテキストレイヤーで文字を選択してみた場合


Illustratorで文字を選択した場合


IllustratorでMS Pゴシックの文字を選択した場合


いずれにしてもメイリオのline-heightの設計は結構難しいことだけは確かです。

本文として見やすい行間はMS Pゴシックとはかなり違うので、サイト運営をしている方はユーザの環境にまかせてMS Pゴシックもメイリオも同じでは、タイポグラフィ的な面で視認性や可読性がかなり違うことを理解しておかなければならないでしょう。