このカレンダーは何か技術的なネタを書いていくらしいんですが、僕に求められているのはそんなことではないと信じているのですんごくどうでもいいことを書いて後の人たちに任せようと思います。
とまぁ前置きはさておいて、そろそろ本題に入ろうかと
みなさんはWebフォントというものをご存知ですか？今回は知らない人から知ってる人でも、もしかしたら得するかもしれないことを書けたらなと思ってます。（
- Webフォントってなーに？
- どうやって使うの？
@font-face {
font-family: '使用したいフォント名';
src: url('フォントファイルのURL') format('truetype');
}
任意の要素 {
font-family: '使用したいフォント名';
}
では早速使ってみましょう、ここから使ってみたいWebフォントを選んでみましょう（見た目はリンク先ページ上部のDESIGNを見て確認しましょう）
今回はh1要素に対してmpuls-1p-blackというフォントを指定してみました、ブラウザで表示した時の画面はこんな感じです
アルファベットだと少し分かりにくいかもしれませんが、日本語の方は丸みを帯びた可愛らしい？フォントになってると思います。こういうフォントを使うとサイトの見た目も良くなりますね！(なるよね？)
これだけの記述で使えるようになるWebフォントですが、もっと簡単にWebフォントを使う方法があります。それはGoogle web fontsを利用することです、名前を見れば分かる通りGoogleがなんと無償提供しているWebフォントです。
使い方は、一覧から見て気に入ったフォントのquick-useをクリックするとページ中央に
こんなのがあるので利用するWebページにコピペして、使いたい要素のスタイルのfont-familyを変えるだけです、今回はMystery Questというフォントを指定してみましたのでこちらもどんな画面なのかお見せします
どうでしょうか？中々面白い見た目になったと思います、残念ながら見てわかる通り日本語には対応していませんが、より手軽に面白いデザインのフォントが利用出来るだけでも十分だと思います。日本語も対応しているWebフォントを扱っているサイトもありますが、有料だったり無料で使うにも会員登録が必要だったりと手軽に使えるものを探すのが面倒だったので今回はここまでということで。
ということで〆に入りますが、Webフォントの本当に便利なところはそれがフォントだということです。CSSを変更すれば簡単に色や大きさを変更できます、もしサイトロゴなんかを画像で作っていたとしたら、そうはいきませんよね。サイトをお持ちの方はWebフォントでサイトロゴを作ってみるのも面白いかもしれません。Webフォントは色々なことが出来て面白いので、少しでも興味を持った人は自分でも調べてみましょう！(投げやり)
明日はひろじゅーさん書いてくれます。かなりすごいことを書くと言っていたので僕も今から楽しみです！！
すごいのかいたった
返信削除