大学生必見!確定申告でアルバイト代の税金を取り戻す方法

[み]1分くらいでできるからWebFontの使い方を覚えよう

Web Font を使うと、PCにインストールされていないフォントでも表示させることができます。見出しなどに特殊なフォントを使おうとするときに、わざわざ画像をつくって用意したりする手間を省くことができるというすっごく便利なのがWeb Font です。

今回は、みはら.comのロゴをWeb Font で表示してみます。

Web Font をつかう準備

まず、HTMLを準備しておきます。
[cc lang=”html”]

みはら.com


みはら.com だよ。



[/cc] 準備はこれだけです。これをブラウザで見るとこんな感じです。

Web Font を導入

今回はたぶん一番カンタンに使えるGoogle Web Fonts を使います。

ずらずらーっとフォントが並んでるので、そのなかから使いたいなーっていうフォントを探します。あ、これだ!っていうフォントを見つけたら、「Quick-use」をクリックします。

そうすると、わかりやすい導入の手順が表示されますので、まずは、フォントを読み込みます。
[cc lang=”html”] [/cc] これを<head>の中に追加します。
そして、CSSに次のを追加します。
[cc lang=”CSS”] font-family: ‘Paytone One’, sans-serif;
[/cc] これだけです。

できあがり

できあがったのが、これ。
[cc lang=”HTML”]

みはら.com


みはら.com だよ。


[/cc]

ブラウザで表示するとこんな感じです。

かなりカンタンにできるんで、ぜひどうぞ。

コメントを残す

メールアドレスが公開されることはありません。