スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

かなり充実してきたGoogle Web Fonts API

通常、フォントはユーザー側の環境に影響されますが、Google Web Fonts APIを使うとGoogleのサーバー上にあるフォントを使うので、ユーザー側の環境を気にせず自由に使用できます。

以前からあるサービスですが、久々に見たらフォント数がかなり増えていたので紹介してみます。

ちなみに現在105個の英語フォントが提供されています。

googleWebFonts.png

ここでフォントを選んで、次の画面でコードを取得します。

googleWebFonts2.png

今回の場合以下のようになります。

まず使用するフォントを読み込んで

<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css'>

フォントを使用する場所をCSSで指定します。

h1 { font-family: 'Terminal Dosis Light', arial, serif; }

Font previewerでリアルタイム編集

googleWebFonts3.png

フォントのサイズや太さ、文字の間隔、単語の間隔などを編集できて、リアルタイムで表示を確認できます。

コードも表示されるのでお手軽です。

CSS3のtext-shadowを組み合わせると面白い

テキストに影をつけるtext-shadowを使うと画像で作ったロゴのようになります。

南国風なロゴに仕上がっています。

googleFontAPI.png

スタイリッシュなロゴに仕上がっています。

josefin.png

text-shadowについては以前紹介しましたのでをご参考に!

ちなみにこのブログのロゴもGoogle Web Fonts APIを使っていて、text-shadowでオンマウスで光るようにしています。

web fontやCSS3が充実してくると画像なくてもなんとかなりそうですね。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。