• M+ WEB FONTS #1

いきなり申し訳ありません、このエントリでは実験的に CSS3 の Web フォント機能を使用しています。M⁺ 1P Black と Regular、二つの ttf ファイルを表示するため、合わせて約 528 KB 分の転送量が増加しています。通信環境によっては描画に時間がかかったかもしれません。非対応ブラウザでは下の「M+ WEB FONTS」ロゴタイプが通常の本文指定フォントで表示されますが、対応ブラウザでは M⁺ フォントで表示されます（のはずです）。

このような部分的な使い方でも、本文フォント全てに指定する使い方でも、ttf ファイル分の転送量は同じなので、描画にイライラする割にはもったいない使い方です。現状では自分の Mac OS X 10.4.11 / Safari.app 3.1 環境でしか確認できず、実際の対応状況がよく分かりません。無事に「M+ WEB FONTS」が M⁺ フォントで表示（WEB の文字が細く、他の文字が太くなっていることが目印です）されている方は、その環境を WRITEBACK で教えていただければ幸いです。「表示に時間がかかりすぎ、余計な転送させるな！」というご意見もお受けいたします。ちなみに上記ロゴタイプは以下の記述で表示しています。

<link rel="stylesheet" type="text/css"
 href="http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css" />
<style TYPE="text/css">
<!--

#mplus_web_fonts a:link,
#mplus_web_fonts a:visited
{
color: #333;
text-decoration: none;
}

#mplus_web_fonts a:hover
{
color: #CCC;
}

#mplus_web_fonts a:active
{
color: #FFF;
}

#mplus_web_fonts
{
font-family: mplus-1p-black;
font-size: 28px;
text-transform: uppercase;
}

#mplus_web_fonts #plus
{
color: #666;
position: relative;
bottom: 0.36em;
left: -0.1em;
}

#mplus_web_fonts #web
{
font-family: mplus-1p-regular;
position: relative;
left: 0.2em;
}

#mplus_web_fonts #fonts
{
position: relative;
left: 0.5em;
}

-->
</style>

<div id="mplus_web_fonts">
<a href="http://mplus-fonts.sourceforge.jp/webfonts/">
m<span id="plus">+</span><span id="web">web</span><span id="fonts">fonts</span>
</a>
</div>

CSS3 Web フォント機能を検証するため、試験的に設置してみました。和文フォントでの利用が現実的なものか分かりませんが、フリーフォントの「自由さ」を感じていただければと思います。現状では対応ブラウザが限定されるようですが、通信環境の進化とともに一般化すれば面白そうです。
サーバ上には現時点で最新の CVS 版から make したフォントファイルを用意してあります。含まれている漢字は教育漢字にも足りませんが、ぜひお試しください。Mac OS X 10.4.11 上の Safari.app 3.1 で動作確認しました。

M⁺ WEB FONTS   http://mplus-fonts.sourceforge.jp/webfonts/