◉ Google web fontsの使い方(html作成初心者に解説したまとめ)
・その(2)「前回の補足」

2012年2月18日土曜日

API font web


このpostは、「Google web fontsの使い方(html作成初心者に解説したまとめ)・その(1)」の続きです。その(1)からお読みください。

今回のpostをまとめている間に、フォントファミリーが3つ追加されている。

前回の補足

1. Choose the styles you want:で、右側に「Page load」と書かれたインジケーターが表示される。fontを実際に使うとき、webページにすべてのフォントがロードされる時間を示していて、緑色内に収まっていればユーザビリティ的に推奨されるということになる。下の例ではやや多すぎるかもしれない。


● コレクションしたフォントはキャッシュされないので、「Google web fonts」ページを一旦閉じて再び開くと、内容がクリアされてしまう。内容を保存しておきたい場合は、右上「Bookmark your Collection」をクリックして、別窓で表示されるurlをコピーしておく。


(例)http://www.google.com/webfonts#ChoosePlace:select/Collection:Emblema+One


● 左側ペインで、フォントを検索する際、目的のフォントのカテゴリーが決まっている場合は、[Filters:] で、チェックを外し、目的のフォント以外のカテゴリーを隠して表示させることができる。








また、左側ペインの [Styles:] の「Show all styles」をクリックすると、フォントにboldやItaricがあればすべて表示される。「Hide all styles」で基本のフォント一つに戻す。


[Chooze](下のブルーのエリア)の際の右側ペイン [Word]、[Sentence]、[Paragraph] の3つのタブは、初期で [Sentence] が選ばれていて、 [Preview Text] の内容が表示フォントサイズ28ptで横一列に表示される。表示サイズの変更は、9〜72で13段階。


[Word] タブを選ぶと、表示フォントサイズ72ptでPreview Textの頭部分を表示する。表示サイズの変更は、48〜120で5段階。一度に多くのフォントを表示させる場合はこちらを選ぶ。


[Paragraph]タブを選ぶと、を段落単位で表示して、実際の文章に利用した場合の感じがつかめる。表示フォントサイズは13pt。表示サイズの変更は、9〜16で6段階。


[Preview Text:] でサンプル表示させる欧文の文章を変更できる。初期では「Grumpy wizards make toxic brew for the evil Queen and Jack.」(気難しいウィザードは悪の女王とジャックのために有毒な醸造を行います)となっている。その他の用意された文章に替えたり、好きな文章を直接打ちこむか、コピー & ペーストして変更できる。


各フォントの右下部分に表示される各ボタンについて
1. フォントにItalicやBold、Italic Boldがある場合は、[See all styles] ボタンが追加される。これをクリックすると、すべてのスタイルを表示してくれる。ボタンは、[Hide all styles] に変わるので、クリックすると元に戻る。

2. [Quick-use] ボタンをクリックすると、「1. Choose the styles you want:」の状態に移行する。


3. [Pop out] ボタンをクリックすると、別窓でその書体のすべてのスタイルや、すべてのglyph(グリフ)など詳細を表示してくれる。ちなみにグリフとは、日本のフォント関連では「文字を可視化した形状」を指す。



Google web fonts:http://www.google.com/webfonts