Webフォントを使ってみた（前篇）
教育コーディネーターの岡本です。
本日はデブサミで出展者としてMonacaの宣伝をしております。
見かけた方は是非、お声掛け頂ければと思います。
さて、ブロ グの方ですがWebフォントのお話をしたいと思います。
■フォントの重要性
文章の読みやすさや印象は、
文章の内容だけでなくフォントによっても左右されます。
そのため、フォント選びは非常に重要です。
■Webで使えるフォント
ウェブで使えるフォントは元々、
パソコンや携帯等のクライアント側に予めインストールされているフォントに限られました。
スタイルシートでフォントを指定することができるのですが、
クライアントが持っていないフォントを指定しても動作しません。
Macにしかないフォントを指定すると、Windowsでは他のフォントに置き換えられてしまいますし、
Windowsのメイリオを指定しても、WindowsXPでは使えなかったりするわけです。
■Webフォントの仕組み
Webフォントはフォントファイルを配信することで、
クライアントが持っていないフォントでも利用できるようにする技術です。
これからは、文章にあったフォントを自由に選べるわけです。
「勿論、フォントファイルを利用する許可があればの話ですが…」
■メリット
・文章が読みやすくなる
適切なフォントを選択することで文章が読みやすくなります。
・デザイン性や保守性の向上
CSS3の他の技術と組み合わせることで、
HTMLxCSSだけでもある程度デザイン性の高い見出しやメニューを作ることができます。
そのため、保守性の向上も期待できます。
■デメリット
・レスポンス性の悪化
特に日本語の場合ですがフォントファイルには、
ひらがなや漢字等が大量に含まれているため非常に重くなります。
そのため、サブセット化や圧縮処理が必要になります。
・ライセンスの問題
フォントは著作物なので、利用するためには許可を取る必要があります。
幸い、大手のフォント会社がフォントの配信に着手しているため、
お金さえ払えば利用できる環境は整いつつあります。
・フォントプラス
http://webfont.fontplus.jp/
・TypeSquare
http://www.morisawa.co.jp/typesquare/
■Google Web Fontsを使ってみる
日本語のフォントはまだ用意されていないようですが、
手っ取り早く利用できるフォント配信サービスにGoogle Web Fontsがあります
●使い方
・使ってみたいフォントを探す
・CSSファイルを読み込むようにする
例
<link href='http://fonts.googleapis.com/css?family=Shojumaru'
rel='stylesheet' type='text/css'>
・font-family指定でフォントの指定する
h1 {
font-family: 'Shojumaru', cursive;
}
↓CSS3で作ってみたサンプルのタイトル
とまぁ、既に用意されて いるフォントデータを使う場合は、
非常に簡単であることが確認できる思います。
日本語のフォントもリーズナブルな値段で使えるようになってきているため、Webフォントは、たぶん流行ると思います。
後半では、自分でフォントをサーバに設置して、
そのフォントを自分で利用する方法を試していきたいと思います。
