DAY42.実務でよく使うアニメーションの付け方編 Webフォント/デバイスフォント

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

1.font-familyに複数のフォントを書く理由

セレクタ {font-family: フォント名;}

OSによって入っているフォントが異なるから

複数のフォントを書いて対応

MacでもiPhoneでもiOSでも使えるフォントを複数個並べてカバーする

間に半角スペースの入るフォント名は「’」ではさむ

2.記載する順番

前に書かれたフォントが優先される

英語フォントは前に並べる

3.最後に登場する「sans-serif」と「serif」

最後に総称フォントファミリー名を書く
・総称フォントファミリーのイメージは「最後の砦」
・フォントが全く入っていなかった場合
「せめてこういう系統のフォントを表示」
・「sans-serif」と「serif」

02.Googleフォントの使い方

1. Google Fontsとは？

・完全無料でWebフォントを使用できるサービス
・商用利用でも無料

2. Webフォントとは？

サーバーからフォントデータを読み込み
ブログやWebサイトに表示させる仕組みのこと

通常のフォントの場合、Webページを閲覧する端末に
インストールされているフォントしか表示させることができない

Webフォントであれば、サーバーから読み込むため
どの端末でも共通のフォントを表示させることができる

使用するフォント種類が増えるほど重くなり
ページの読み込み速度は遅くなる。

Googleの高速サーバーから読み込むことができるので
数種類の英語Webフォント使用であれば気にならない

3. Google Fontsの使い方

①利用ページにアクセス

②使用するフォントを選ぶ

③太さなどのスタイル設定をする

④HTMLにフォントの読み込みコードを貼る

⑤CSSでfont-familyを指定

4.効率的なWebフォントの探し方

①書体でフィルターをかける

②太さや斜体でフィルターをかける

③人気順や新着順で並び替える

03.フォント周りの便利ツール

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

雰囲気に合ったフォントを試しながら探せる「TypeSquare」

フォントファミリーは変数管理しておく

フォントファミリーは、仮のフォントで適応することが多かったり、
あとからの修正が発生しやすい部分

あとから変更されそうな部分は、Sassの変数で管理しておくと便利