icon M+ WEB FONTS #2 19 Apr 2008

いきなり申し訳ありません、このエントリでは実験的に 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>