シンプルウェイ制作班|WEB制作スタッフブログ

Webフォントを使ってみませんか

2011年09月06日

HTML5やCSS3といった新しい技術がどんどん浸透していっていますが、
やはり気になるのはWebフォント

これまで画像でしか表示が難しかった極太フォントや
オシャレなフォントをHTMLとCSSだけで表示ができるようになりましたキラキラ

色々なサービスも始まっていますが、
簡単・無料で多数の欧文フォントが使用できるGoogle Web Fontsを試してみます。

例:
SimpleWay Corporation.


まずWebフォントを使いたい部分を用意します。
SimpleWay Corporation.


次にGoogle Web Fontsのサイトで使いたいフォントを選択。
各フォントの右下にあるQuick-useをクリックします。
Google Web Fonts

「Preview Text:」にテキストを入力すると、そのテキストでフォントのプレビューが見れますよ。


3.にHTMLに読み込ませるCSSファイルの記述があるので、それを内に読み込ませ
Google Web Fonts


4.にある通り、CSSでフォントを指定します。
span.webfont {font-family:'Love Ya Like A Sister', cursive;}




欧文かつ画像を作るまでもないけど、ちょっと目立たせたい時など、
気に入ったフォントがあったら使ってみては?

writer : @


同じカテゴリー(CSS)の記事画像
世界各国のwebデザイン~バレエ団編~
GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション
サイトにひと手間!CSS3アニメーション
英数字で途中改行するスタイル
同じカテゴリー(CSS)の記事
 世界各国のwebデザイン~バレエ団編~ (2016-03-28 15:58)
 text-shadowを使ってテキストを装飾 (2015-08-24 13:49)
 三角形の作り方 (2015-04-21 08:11)
 GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション (2014-09-16 17:47)
 transformで回転したとき、ジャギるのを直す方法 (2014-09-01 12:12)
 サイトにひと手間!CSS3アニメーション (2014-02-17 18:18)
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。

コメントフォーム

名前:
メール:
URL:
コメント:
上の画像に書かれている文字を入力して下さい

<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 29人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ