DAY11:Webフォント、デバイスフォントの理解

デザインカンプのフォントをコーディングで表現する時、以下の3パータンのいずれかで対応します。

  • デバイスフォント
  • Webフォント
  • 画像

優先順位としては、デバイスフォント > Webフォント > 画像 になるかと思います。

自分もまだまだフォントのことが分かっていない中でこのお題を出して恐縮ですが、デザインを再現する上でフォントはめちゃくちゃ大きなインパクトを与える部分なので、コーダーも扱い方を覚えておく必要があると思います。

課題:英数字に「Lato」フォントを適応

Googleフォントを活用して、DAY8までに作成したサイトの英数字部分を「Lato」フォントに変更してください!

英数字の部分を具体的に言うと、以下の部分です!

  • メニュー(regular 400)
  • 見出し(bold 700)
  • Newsの日付(regular 400)
  • Newsの「more」リンク(bold 700)
  • Priceのテーブルの見出し(bold 700)
  • フッターメニュー(regular 400)
  • コピーライト(regular 400)

日本語もやってみる

その他の日本語を、よく使われる「Noto Sans JP」に変更してみてください!(キャッシュ削除しながら更新して、サイトの重たさとかも体験してもらえたらと思います)

CSSのフォントの指定を理解する

今回の課題にあたって、以下の記事などを参考にCSSのフォント指定の方法とGoogleフォントの使い方を理解しましょう!

  • font-familyには、なぜ複数のフォントを書くの?
  • 記載する順番にはどういった意味がある?
  • よく最後に登場する「sans-serif」と「serif」は何?

など。

CSSでのフォントの扱い方

サルワカ先生の記事を2つ。

font-familyの書き方まとめ:CSSでフォント種類を指定しよう

Googleフォントの使い方

デバイスフォントでは表現できない、あるいは、デバイス関係なく同じフォントで表現したい場合に、Webフォントが使われたりします。

WebフォントとしてはGoogleフォントがよく使われので、自在に使えるようにしておきましょう!

【2019年版】Google Fontsの使い方:初心者向けに解説!

フォントの適応を確認する「WhatFont」

今どのフォントが適応されているか確認するには、Chrome拡張機能である「WhatFont」が便利なので、チェック時などにぜひ使ってみてください。
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事