【デイトラ学習記録】Web制作コース　中級編　旧課題　DAY50 Webフォント、デバイスフォントを理解する

2023年8月3日2023年12月7日

みなさん、こんにちは。ここぽてとです。
本日もデイトラWEB制作中級編に取り組んでいきます。

本日の学習は、CSSのフォント指定の方法とWEBフォント（Googleフォント）の使い方を学んでいきます。

ここの学習をすると、

・CSSのフォントの指定を理解できる
・WEBフォントのメリットとデメリットが理解できる
・WEBフォント（Google Fonts)を使えるようになる

ということなので、早速学習していきたいと思います！

CSSのフォントの指定の理解

font-familyには、なぜ複数のフォントを書くのか

font-familyに複数のフォントを書くことで、表示できないフォントがあっても別のフォントを表示させられるから！

記載する順番にはどういった意味がある？

font-familyに最初に書いたフォントが優先的に表示されます。

よく最後に登場する「sans-serif」と「serif」とは？

セリフ体と対になる書体に「サンセリフ体（Sans-serif typeface）」があります。
サンセリフ体の「サン（sans）」は、フランス語で「ない」という意味を表します。
つまり、サンセリフ体は、セリフ（先端の装飾）をもたない欧文書体を指します。
https://www.adobe.com/jp/creativecloud/design/discover/font-serif.html#:~:text=%E3%80%8C%E3%82%BB%E3%83%AA%E3%83%95%E4%BD%93%EF%BC%88Serif%20typeface%EF%BC%89,%E3%81%AE%E7%A8%AE%E9%A1%9E%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

セリフは明朝体、サンセリフはブロック体と思っていました。これについては全然知らなかったので、勉強になりました！

CSSでフォントを設定するときに、参考にさせていただきました。とてもわかりやすかったです。

WEBフォントの使い方

WEBフォントとは

デバイスフォントでは表現できなかったり、どんな閲覧環境でも同じフォントで表現したい場合にWebフォントが使われます。

WEBフォントのメリット

フォントが閲覧環境に左右されず、CSSのフォントの指定を理解するデザインが均一化されます。つまり、デバイスフォントで指定できない文字を画像にする必要もなくなります。

WEBフォントのデメリット

デバイスフォントよりもWEBフォントの方が表示時間が長くなるので、画像などを使って、ページが重くなればなるほど表示時間が長くなります。

Googleフォント（WEBフォント）の使い方

WEBフォントにはいろいろあるみたいですが、今回はGoogleフォントを使ってみました。

使い方はこちらのページに載せています。

また別の方法として、このように、GoogleフォントのEmbedから@importタブを選択し、CSS（Sass）にコピペするする方法もあります。上の方法で、できなければこちらで試してみてください。日本語表記と英数字表記を指定することで、文字化け等の心配もありません。

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Zen+Maru+Gothic:wght@500&display=swap');
$font-en:'Lato', sans-serif;
$font-ja:'Noto Sans JP', sans-serif;

.section-title {
  font-family: $font-en;
}
.section-title2 {
  font-family: $font-ja;
}