【ズルいWeb制作】2nd:100万円稼ぐまでの挑戦33【Webフォント、デバイスフォント】

こんにちは、タビんちゅです。

目標はWeb制作で100万円稼ぐ!!

東京フリーランスが無料で提供している30DAYSトライアル(デイトラ)1stを完了し、2ndで学んだことを忘れないうちに書いていきます。

これからデイトラをはじめる人の参考にもなるかもです。

この記事を書いたタビんちゅは、

  • Web制作で稼いで2020年5月のセブ🇵🇭友達の結婚式に絶対行く
  • セブIT留学で大失敗
  • 海外フリーランスを諦められない
  •  #30DAYSトライアル で再挑戦プログラミング中
  • Web制作、フリーランス関連を学んで即発信中

あと記事はサクッと書いているので、誤字脱字があったらすみません。

『2nd:DAY18』を学習中

https://www.daily-trial.com/lessons/web_site/courses/40074aa6/articles/396cbc92

【今日やること】Webフォント、デバイスフォントを理解する

デイトラ1stでGoogleフォントの使い方は学んだので、たぶんサクッと理解できるはず

CSSのフォント指定の方法とGoogleフォントの使い方

デイトラにある、下記の質問がわからなかった

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

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

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

参考サイトのサルワカ先生の解説で質問は解決。図解でとてもわかりやすいです。

サルワカ 先生おすすめのfont-familyの書き方

body {
font-family: ‘Avenir’,’Helvetica Neue’,’Helvetica’,’Arial’,’Hiragino Sans’,’ヒラギノ角ゴシック’,YuGothic,’Yu Gothic’,’メイリオ’, Meiryo,’MS Pゴシック’,’MS PGothic’  
}

MacでもWindowsでもiPhoneでもきれいに表示されるおすすめのfont-familyまで教えてくる。最高です

あと、Chrome拡張機能であるWhatFontは、今どのフォントが適応されているか一目で確認できるので便利ですね。

参考サイト:

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

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

ひと口メモ

ほとんどのWebサイトがsans-serifゴシック体フォントらしいので基本はこれでOK。特別な指示があればフォントを変更していけばいい。

というわけで、今回はここまでです。『プログラミングは継続がいちばん大事。』ではでは。

人気No.1記事