フォントファミリーとWebセーフフォント
フォントファミリーを設定し、すべてのブラウザーで安全に使用できるフォントについて理解します。
「フォントファミリーとWebセーフフォント」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
font-familyプロパティ
font-familyプロパティは、要素に使用する書体を設定します。フォントスタックとして、優先度の高い順にフォント名をカンマ区切りで並べ、最後に総称フォントファミリーを指定します。
<p>This text renders in the page's body font stack.</p>
総称フォントファミリー
CSSでは、フォールバックとして5つの総称フォントファミリーが定義されています。
serif— 装飾的な線があるフォント（Times、Georgia）sans-serif— 線のないすっきりしたフォント（Arial、Helvetica）monospace— 文字幅が一定のフォント（Courier、Consolas）cursive— 手書き風のフォントfantasy— 装飾的なディスプレイ用フォント
Webセーフフォント
Webセーフフォントは、ほぼすべてのOSにあらかじめインストールされています。外部のフォントファイルを読み込まずに利用できます。
- Sans-serif: Arial、Helvetica、Verdana、Trebuchet MS
- Serif: Georgia、Times New Roman
- Monospace: Courier New、Consolas
スペースを含むフォント名
スペースを含むフォント名は引用符で囲む必要があります。
<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>
フォントスタックのベストプラクティス
フォントスタックは次のように構成します。
- 優先するフォント（インストールされていない場合があります）
- 似たフォントを1つまたは2つ
- 最後のフォールバックとして総称フォントファミリー
<p class="font-stack">Georgia → Palatino Linotype → serif fallback</p>
システムUIフォント
最新のデザインでは、システムフォント、つまりOS標準のUIフォントがよく使われます。ネイティブな見た目になり、ダウンロードも不要です。
<p class="system-ui-text">This uses your OS's native UI font.</p>
コード用の等幅フォントスタック
コードエディターやターミナルには、等幅フォントのスタックが必要です。
<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
return "world";
}</pre>
font-familyの継承
ほとんどの要素は親要素からfont-familyを継承します。一部のフォーム要素（<input>、<textarea>）は、ブラウザーによってデフォルトでは継承しない場合があります。その場合は明示的に設定してください。
<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>
利用可能なフォントの確認
@font-face内のlocal()関数を使うと、システムフォントが利用可能かどうかを確認できます。ブラウザーはフォントをダウンロードする前に、まずローカルのフォントを試します。
<p class="my-font-text">Text using MyFont (local match or fallback)</p>
Unicode範囲によるサブセット化
フォントを読み込む際に、@font-faceでunicode-rangeを使用すると、必要な文字範囲だけを読み込めます。これにより、多言語サイトでのダウンロードサイズを削減できます。
<p class="inter-text">Basic Latin text (U+0000–00FF range)</p>
バリアブルフォントの概要
バリアブルフォントは、フォントのバリエーション軸を使って、1つのファイルにファミリー全体（ウェイト、幅、スタイル）を含めます。タイポグラフィを重視したデザインで、HTTPリクエスト数を大幅に削減できます。
確認問題
sans-serifのフォントスタックで、最後のフォールバックとして使用する総称フォントファミリーはどれですか。
まとめ
font-familyプロパティでは、最後に総称フォントファミリーを指定したフォントスタックを使用します。Webセーフフォントは読み込みなしでどこでも利用できます。システムUIフォントのスタックを使うと、HTTP通信のコストなしでネイティブな印象を与えられます。スペースを含むフォント名は必ず引用符で囲んでください。
よくある質問
「フォントファミリーとWebセーフフォント」レッスンは無料ですか？
はい。「フォントファミリーとWebセーフフォント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「フォントファミリーとWebセーフフォント」で何を学びますか？
フォントファミリーを設定し、すべてのブラウザーで安全に使用できるフォントについて理解します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「フォントファミリーとWebセーフフォント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- フォントファミリーとWebセーフフォント
- フォントサイズ、太さ、スタイル
- テキストの配置、装飾、間隔
- Google Fontsと@font-face