version2.4からversion2.7に変えました。
変わったところは、フォントを指定するパーセントの数値が微妙に変わっています。

「123.1% = 16px」だったりと、より細かく設定されています。

それと、
「select,input,button,textarea,button {font:99% arial,helvetica,clean,sans-serif;}」
この項目が増えていますね。

W3CのCSS Validatorではエラーが出ちゃいますけど、便利なので導入しています。
W3Cから「おめでとう！」と言われるより、ブラウザ間のフォントサイズを同じにできる方がいいです（笑）

ちなみに、YUIはfonts.cssだけを利用しています。
reset.cssは少し参考にして自分流に構築しています。

気になった方や、試してみたい方は、Yahoo! UI Library – Grids CSSへどうぞ。
ちなみに、英語のサイトです。

とは、言い過ぎたかもしれないですけど、それくらい便利な「@font-face」。
使い方は至って簡単です。

CSSソース

@font-face {
	font-family: monof;
	src: url("../monof55.ttf") format("truetype");
}

.fontFace {
	font-family: GTFont;
}

XHTMLソース

<p class="fontFace">abcdefghijklmnopqrstuvwxyz</p>

では、見てみましょう。
Safari3.1でみてください。

abcdefghijklmnopqrstuvwxyz

どうでしょうか？
ちゃんと表示されているでしょうか。

ブラウザの対応が普及されればとても便利になりそうですね。
でも、フォントのライセンスなどで問題がでてくるかも・・・。

ちなみにこの「@font-face」はAdobe MAX 2009でお話を伺いました。
ちょっとSafariが楽しすぎで困ってます・・・。Firefox使いとしてはSafariに同じようなアドオンがあればなー、って思いますね。
おまけですけど、Adobe MAX 2009のセッション資料や講演ストリーミングビデオ閲覧は2月の中旬を予定されているみたいです。
参加された方は2月中旬を待て！！！！！

表示、コンタクトフォームからのメール送信。文字化け。
この辺のことは問題なかったんですけど、iPhoneを傾けたときに一部の文字が拡大されるんだけど、傾きを元に戻したときに一部の文字が拡大したまま戻らない。
と言う現象にはまっています・・・。

通常時の表示サイズ

そして、傾けて戻したときの文字サイズ

上記の二枚の画像を比べてもらえるとわかりますが、大きくなってしまいます。
なぜか、左の日付の文字はかわらないんですけど・・・・。

半角だからか？って思ったら他の半角の文字も拡大されたまま戻ってないし。
ますますワカラナイ！！！

ちなみに、metaの設定はコチラ。

<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0" />

表示サイズは320pxに固定。
拡大率は2倍
デフォルトの表示率は1倍
ユーザーが拡大出来る最大値は2倍

こんな感じです。

CSSのfont-familyの設定が悪いのか・・・。
文字サイズの設定が悪いのか。。。

ちょっと色々検証をしないといけないですね。

でも、ブラウザがSafariなんでprototype.jsとか使えて便利ですね。
PHPのメールフォームも問題ないし。

普通のブラウザだし、当たり前か・・・。

viewportの設定に関しては詳しく下記のサイトに掲載されていますのでそちらをご覧下さい。
参考サイト様
ProjectDD Blog – iPhone / iPod touch 向けのmeta要素 viewport

ちなみに、CSSでのフォントの指定は、

font-family:Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ ゴシック","MS PGothic",sans-serif;

ヒラギノがあたってます。
以下の画像がブラウザごとの見え方です。

IE6での表示

Firefoxでの表示

Safariでの表示

Operaでの表示

うーん。
Firefoxがきたないですね。
Safariがきれいにアンチエイリアスがかかってる気がします。
で、IEとOperaは読みやすい。

当ててる、フォントがだめだと思うんですけど。
日本語フォントの選択って難しいですよね。

「shift+7」の場合。It’s Tom’s book

「shift+alt+[」の場合。It’s Tom’s book

フォントサイズが小さいのでわかりづらいかもしれませんが、Fireworks等のアプリを使って検証してみると違いがわかります。

大きくするとこの違いです。
普段気兼ねなく使ってしまいそうな「shift+7」はフィートやインチの時だけに使われます。ただし、その際にそのまま使うのではなくイタリック体にして使用するのが正しい使い方みたいです。

ちなみに、上の画像の赤丸で囲ってあるアポストロフィーの逆のやつは、「alt+[」で、出ます。

こういう、細かいところにもちゃんと気を使い正しい使い方をするのが大事ですよね。

TYPETESTER

設定出来る項目

• font-family
• size
• line-height
• letter-spacing
• text-align
• word space
  (文と文の隙間の設定)
• text-decoration
• color
• background-color

「apply to colomn」はそのフォームで設定した内容を別のフォームに反映させるボタンです。

font-familyでは、WinとMacのデフォルトフォントとＭＳ 明朝やDF系、小塚系などみなさんがインストールされていそうなフォントが多数用意されています。
これらを設定できるフォームが3つ用意されていて、その設定を反映させる文章のタイプも、bold、italic、smallなど多数用意されています。

ヘッダーの左下にある「sample text」のテキストエリアに検証したい文章を打ち込んで検証します。
もちろん日本語も打ち込めます！

こういう便利なサイトはとてもありがたいですね。
がんばって運営してもらいたいです。

• Better fonts
  約10000種類ものフォントがあるサイト。一応サムネイルがあるので探すのに助かります。
• dafont.com
  よく利用させてもらってます。カテゴリー分けされているので比較的すぐに目的のフォントが見つかるんじゃないんでしょうか。某企業のロゴフォントとかもあります。
• Urbanfonts.com
  こちらもカテゴリー分けされているので親切です。さらに、マウスオーバーでサムネイル以外の文字も見れるのでとても便利！
• 04
  個人的に一番大好きなフォントです。bitmap fontを扱っています。本当にいいフォントですわ・・・。

個人的によく利用させてもらっているサイトをご紹介しました。
フォントは、探すのが大変です・・・。

目当てのものが見つかったときはすごくうれしいですけど。
そのときには1～2時間たってることもしばしば・・・

探すのは時間のあるときにオススメします（笑）