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の変数で管理しておくと便利
この記事が気に入ったらサポートをしてみませんか?