おはようございます。佐伯です。
2012年12月12日ですね。「12」が3つ並ぶ100年に一度の『ダースの日』ということで森永製菓がキャンペーンを行っているようです。
さて、前回、CSSスプライトの項で少し触れました『WEBフォント』について説明します。
1.WEBフォントとは？
「テキストに画像を使うとスパムとして判断されがち」というお話をしました。
しかし、標準のフォントだけではかっこ良く表現できないデザインや、ブラウザ・OSによる表示の違いなどもあり、全ての文字列をテキストで表示するのは難しいです。そんな悩みを解決するのが『WEBフォント』です。
2.WEBフォントの使い方
実際にWEBフォントがどういうものか見てもらったほうがわかりやすいでしょう。
サンプル
上のボタン画像の文字はWEBフォントを使用しています。
試しに文字列をマウスでドラッグしてみて下さい。文字色が反転するはずです。
ソースは以下の通り。
※今回は「M+ WEB FONTS」というフリーフォントを使わせていただきました。
「M+ WEB FONTS」についてはこちらのページヘ
<span id="sample">サンプル</span>
@font-face {
font-family: mplus-1p-heavy;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-heavy.ttf') format("truetype");
}
span#sample {
background: #09C;
border: 1px solid #DDD;
color: #fff;
text-shadow: -1px -1px 1px rgba(255,255,255,0.5),1px 1px 1px rgba(0,0,0,0.5);
padding: 10px 20px;
line-height: 1;
text-align: center;
display: inline-block;
font-family: mplus-1p-heavy;
}
重要なのは1～4行目の@font-faceの部分と、14行目のfont-familyの指定です。
@font-faceはWEBフォントをブラウザにフォントとして認識させるための指定のようなものです。
そして、font-familyでフォントを指定することで、WEBフォントが適用されるわけです。
3.WEBフォントの問題点
実際に見ていただいたらお気づきかもしれませんが、WEBフォントはWindowsのウェブブラウザで見ると、アンチエイリアス・フォントスムージングが綺麗に表れず、「文字がかける」「縁が汚い」といった現象が起きてしまいます。（Safariを除く）
苦肉の策ではありますが、以下の様なスタイルを追加することで若干の改善が見込めます。
span#test1 {
font-family: mplus-1p-heavy;
}
span#test2 {
font-family: mplus-1p-heavy;
text-shadow: 0 0 1px #aaa, 0 0 2px #ccc, 0 0 3px #eee;
}
span#test3 {
font-family: mplus-1p-heavy;
-webkit-text-stroke: 0.2px #000;
}
テスト1 テスト2 テスト3
アンチエイリアスが効かないのなら、CSSでエイリアスを表現してしまおうという荒業です。テスト1は装飾なし、テスト2はtext-shadowプロパティ、テスト3は-webkit-text-strokeプロパティを適用しています。
-webkit-text-strokeについては、文字の太さを調節する、Webkitブラウザ特有のプロパティとなっており、IEやFirefoxではエフェクトは表示されません。
いずれにしても、このような修正がないと綺麗に表示できないということはまだまだ実用段階では無いのかもしれません。OS,ブラウザサイドに頑張って頂きたいところです。
また、ユーザ側でJavascriptをオフにしていたり、ブラウザ側でフォント設定を無効にしていたりすると表示されないという問題もあります。しかし、そのような場合でも、デフォルトのデバイスフォントで表示されるので内容が理解できないというようなことは無いと思われます。
4.WEBフォントはどこで探せば良いか
各フォントメーカーで様々なクラウドフォントサービスを展開しています。
先程、紹介した「a href=”http://mplus-fonts.sourceforge.jp/webfonts/” target=”_blank”>M+ WEB FONTS」はフリーフォントですが、モリサワなど有名なフォントをライセンス契約して使用出来るWebサービスがあります。
FONT PLUS http://webfont.fontplus.jp/ TypeSquare http://typesquare.com/
モリサワは独自でTypeSquareというサービスを展開していましたが、今年の6月よりFONT＋での提供が開始しました。FONT＋にはモリサワの競合であるフォントワークスのフォントもあり、こちらのサービスであれば有名ドコロのフォントは一通り網羅できるのではないでしょうか。
ご使用の際は各メーカーのライセンスをよく確認して利用して下さい。
知らずに使って、後からライセンス料を請求されるなんてことのないように。。
