エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

【DAY11】Webフォント、デバイスフォント、画像フォントの理解【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY11課題】Webフォント、デバイスフォントの理解

DAY11の課題は「Webフォント、デバイスフォントの理解」です。

 

WEBページで使う「フォント」の全体像理解

まず、フォントについての全体像を理解していなかったので、学びました。

 

Webページを表示する時に「文字を表示」したい。

→文字を表現するための方法が2つある。

それが、HTMLフォント画像フォントです。

※厳密には「画像フォント」という言葉ではないかも…

 

イメージ的には

  • HTMLフォントはテキストデータ
  • 画像フォントは画像ファイルで作られたデータ

って感じ。

 

で、HTMLフォントの中の種類としても、デバイスフォントとWEBフォントの2つがあります。

この2つは「データの置き場所」が違います。

デバイスフォントは文字通り「PC」や「スマホ」の中にあるフォント。

一方でWEBフォントは、「WEB上(どこかのサーバ)」にあるフォントです。

 

一方で画像フォントとはどんなものか?

「HELLO」という文字を表示する時に「H」「E」「L」「O」の4つの画像を組み合わせて、表示するような仕組みです。

 

HTMLフォント(デバイスフォント、WEBフォント)と画像フォント

ということで、

  • HTMLフォントデバイスフォント=デバイス内にある)
  • HTMLフォントWEBフォント=WEB上のどこかにある)
  • 画像フォント

 と整理できますね。

 

使い分けに関しては、WEBページを表示する時のコンピュータの気持ちに立って考えると、わかりやすいと思います

  • デバイスフォント→デバイス内にあるので持ってくるのが楽。表示もただの文字だから楽
  • WEBフォント→WEB上からいちいち持ってくるから面倒。表示はただの文字だから楽
  • 画像フォント→WEB上から画像を持ってくるのは面倒。表示も画像だから重たいし面倒

という感じ。

画像フォントは「ここぞ」という所で使われている印象です(ページのファーストビューの目立たたせたい文言とか)

 

WEBフォントの中の1つがGoogleフォント

過去のデイトラでも使った「Googleフォント」はWEBフォントの1つです。

  • HTMLフォントデバイスフォント=デバイス内にある)
  • HTMLフォントWEBフォント=WEB上のどこかにある) ※Googleフォント
  • 画像フォント

 

Googleが用意したサーバー(遠くにあるコンピュータ)からフォントデータを持ってきます。

 

ちなみに、Googleフォント以外のWEBフォントも色々とあるようです

liginc.co.jp

 

以上、デイトラDAY11の課題でした。

フォントの「用語」をしっかり理解できていなかったので、勉強になりました(灬╹ω╹灬)

 

www.engineer-step.com