2008年08月28日

メイリオ専用CSSの読み込ませ方

ローカルで生きている環境が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ゴシックもメイリオも同じでは、タイポグラフィ的な面で視認性や可読性がかなり違うことを理解しておかなければならないでしょう。

 このエントリーをはてなブックマークに追加
posted at 00:55│コメント(0)Web制作 

トラックバックURL

この記事へのトラックバック

1. Virtual PC 2007  Windows Vista上でXPを動かす!FX便利ツール  [ FXテクニカル分析&業者比較Blog ]   2008年08月28日 12:00
本日は、Windows Vista上でWindows XPを動かす、無料の便利ソフトをご紹介します。     FXトレード用のソフトには、いまだにVistaでは動かないものがあったり(CMC
2. IE7+メイリオのline-weight問題  [ Steal Atmosphere ]   2008年10月16日 13:03
メモ書き程度。 今、参加サークルさんのHPデザインを行っているが、そこに問題発生。 font-familyをメイリオにすると、line-weightがおかしくなる。 検索してもあまりヒットせず、ようやくたどり着いたのがこちら http://blog.scramble-egg.com/archives/5027159...

この記事にコメントする
(※スパム防止のため管理人の確認後に反映されます)

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
Archives
記事検索