Subscribe Twitter

2012年2月12日日曜日

このエントリーをはてなブックマークに追加

◉ Google web fontsの使い方(html作成初心者に解説したまとめ)
・その(1)


あるwebサイトを管理している知人が、「かっこ良くデザインしたはずのwebページがPCの環境によって崩れてしまう」とヘルプを求めてきた。

ブラウザの問題ならCSSやハックである程度対応できるが、webページのソースを見てみると、デザインのメインに指定している欧文フォントが、多くのPCにインストールされている一般的なものではなかった。

そこで問題のフォントを画像にしてしまうことを提案したが、頻繁な更新などを理由に即却下された。

次善の策と呼べるほど真剣に考えた訳ではないが、「あとは、Google web fontsの中から欧文フォントを選ぶくらいかな…」とぼそっとつぶやくと、これには食いついてきた。


ということで、Google web fontsについて使い方を解説するはめになった。

まずweb fontとはなにか
・普通、webブラウザを使って、webページを見る際は、そのローカル側のPCにインストールされているフォント以外は表示できないが、CSS3のweb font技術を使えば、サーバー側に置いたフォントを利用して表示できる。ただしライセンスの問題が生じる場合がある。

そして今回利用するGoogle web fontsとはなにか
  • Google web fontsは、web fontの一つで、多くのfont-family(現在444)があり、すべてがオープンソースなので、ライセンスフリー。商用でも非商用でも無償で利用できる。利用登録も不要。
  • また、CSS3のweb font技術も不要で、Google web Fonts APIを利用して、htmlのhead部分にフォントAPI の url を指定して、通常のcssで font-family を指定するだけで使える。
  • PCにダウンロード、インストールして普通のフォントと同様に利用することもできる。もちろんこの場合もライセンスフリー。
  • ただし、現時点では欧文フォントのみ、日本語フォントは無い。
Google web fontsのもっとも簡単な使い方
  • Google web fontsのページを開く。もし上の画像のページが開いてしまったら、ブルーのボタン [Start choosing fonts] をクリック。
  • デフォルトでは、フォントを選ぶ [Chooze](下側のブルーのエリア)の状態になっていて、フォントの一覧表示の方法を決めるタブは [Sentence] になっている。このままでスクロールしながら、フォントを選ぶ。フォントを選ぶ名称などの手かがりがわかっていたら、その名称で検索してもかまわない。
  • 気に入ったフォントはとりあえずコレクションに入れておく。各フォントの右側ブルーの「Add to Collection」ボタンをクリックすると、コレクションに入る。下側のブルーエリアに追加される。ボタンは [Remove from Collection] にかわるので、コレクションから削除したいときはこれをクリック。
  • コレクションしたフォント内容を確認するなら、下側のブルーエリア「Review」をクリックする。各フォントの見出しや段落内で使用する際の各種サイズサンプルを表示してくれる。
  • 使うフォントが決定したら、下側のブルーエリアの [Use] ボタンをクリック。下へスクロール。
  • 1. Choose the styles you want:」で、実際に使うフォントにチェックを入れる。コレクションに入っているフォントが一つならスルーしてもかまわない。
  • 2. Choose the character sets you want:」は各言語で使用する文字のサブセットのことなので、普通に英文を表示するだけならスルーしてかまわない。デフォルトは「Latin (latin)」にチェックが入っている。
  • 3. Add this code to your website:」のブルー地の白い四角で囲まれたテキスト部分をコピー。htmlのheadタグの間にペースト。
  • 4. Integrate the fonts into your CSS:」の四角のボーダーで囲まれた部分をコピー。同じくheadタグにペースとして、styleタグで囲み、整形して、classなどを付ける。
  • bodyタグの表示する場所にclass名を付けたタグで表示内容のテキストを囲む。例ではpタグを使っているが、テキストを表示するタグならなんでもかまわない。
  • htmlを保存して、ブラウザで開けば、PCにインストールしていないフォントでも表示される。下の画像は、実際にブラウザで表示したもの。
今回使った例では、コピーしたCSSの後ろ部分に「, cursive」や「, sans-serif」が付いているが、これは総称ファミリー名(generic-family)で、目的のフォントがうまく表示できない場合の代替え(PC内のフォントで)になる。
CSS2の総称ファミリー名(generic-family)は以下の5つになっている
・sans-serif:ゴシック体系フォント。ひげ無し。
・serif:明朝体系フォント。ひげ付き。
・monospace:等幅フォント。大文字や小文字、英数文字の幅が等しい。
・fantasy:ポップ系の書体など、装飾系書体。

実際にGoogle web fonts 8書体を表示するサンプル。
(このブログ支援用に私が管理するサイトのページ):

Related Post:


0 コメント: