CSS - フォント：初学者向けの包括ガイド

こんにちは、ウェブ開発者志望の方々！今日は、CSSフォントの素晴らしい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、私はこの旅を一歩一歩ガイドします。コーヒー（またはあなたの好み次第でテー）を一杯取り、始めましょう！

CSSフォントの紹介

具体的な内容に入る前に、フォントがなぜ如此重要であるかについて話しましょう。全部がComic Sansで書かれた本を読むとどうでしょうか？それほど快適な体験ではありませんよね？それゆえ、ウェブサイトに適切なフォントを選ぶことは重要です。これは、初デートで完璧な服装を選ぶのに似ています。良い印象を残したいですよね！

CSSフォントの省略記法

まずは、フォントスタイルに便利な省略記法を紹介します。これはフォントスタイルのスイスアーミーナイフのようなものです。コンパクトで多様です！

body {
font: italic small-caps bold 16px/2 Arial, sans-serif;
}

この一行で複数のフォントプロパティを一度に設定できます。以下に分解します：

• italic：フォントスタイル
• small-caps：フォントバリアント
• bold：フォントウェイト
• 16px：フォントサイズ
• 2：行の高さ
• Arial, sans-serif：フォントファミリー

これは、セットメニューを注文するのと同じようなものです！

CSSフォント - 複数の値

時には一つのフォントでは足りないことがあります。そんな時には複数の値を使います：

p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}

これは、バックアッププランを持つようなものです。もし「Trebuchet MS」が利用できない場合はVerdanaを試し、それもダメならどのsans-serifフォントでも利用します。

CSSフォント - フォントファミリー

フォントファミリーについて少し深掘りしましょう：

h1 {
font-family: Georgia, serif;
}
p {
font-family: Arial, sans-serif;
}

ここでは、見出しと段落に異なるフォントファミリーを使用しています。見出しには格式ばしいスーツを着せ、段落はsmart casualを保つようなものです！

CSSフォント - フォント機能設定

今度はフォント機能設定を少し洒落てみましょう：

p {
font-feature-settings: "smcp" on, "swsh" 2;
}

これにより小文字大文字化とスワッシュをレベル2に設定します。フォントにスーパーパワーの付与のようなものです！

CSSフォント - font-feature-settingsプロパティ

フォント機能設定の別の例を見てみましょう：

.stylish-text {
font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1;
}

これにより標準的なリガチュア、任意のリガチュア、歴史的なリガチュアを有効にします。テキストを書道の名作に変えるようなものです！

CSSフォント - フォントケルニング

ケルニングは文字間のスペースに関するものです：

.kerned-text {
font-kerning: normal;
}

これにより文字間の適切なスペースを確保します。テキストに息を与えるようなものです！

CSSフォント - フォント言語オーバーライド

時には言語設定をオーバーライドする必要があります：

.japanese-text {
font-language-override: "JAN";
}

これによりブラウザが日本語用の글리フを用いるよう指示します。テキストに日本語を話させるようなものです！

CSSフォント - フォント光学サイズ調整

光学サイズ調整はフォントのサイズに基づいて調整を行います：

.headline {
font-optical-sizing: auto;
}

これによりフォントが異なるサイズでの表示に最適化されます。テキストが変身するようなものです！

CSSフォント - フォントパレット

フォントパレットを使用すると、既定のカラースキームを使用できます：

@font-palette-values --custom-palette {
font-family: Pixelify Sans;
base-palette: 1;
}

.colored-text {
font-palette: --custom-palette;
}

これによりカスタムカラーパレットをフォントに適用します。テキストにメイクオーバーを施すようなものです！

CSSフォント - フォントサイズ

フォントサイズは非常にシンプルです：

body {
font-size: 16px;
}
h1 {
font-size: 2em;
}

ここでは、本文の基本サイズを設定し、見出しはその2倍のサイズにします。テキストに成長 potionを与えるようなものです！

CSSフォント - フォントサイズ調整

フォントサイズ調整は異なるフォント間での読みやすさを維持するためのものです：

.adjusted-text {
font-size-adjust: 0.5;
}

これによりx-heightに基づいてフォントサイズを調整します。テキストにプラットフォーム鞋を履かせるようなものです！

CSSフォント - フォント伸縮

フォント伸縮はフォントを圧縮または拡張するためのものです：

.stretched-text {
font-stretch: extra-expanded;
}

これによりテキストを広くします。テキストがジムで筋トレしたようなものです！

CSSフォント - font-styleプロパティ

フォントスタイルはテキストを斜体にするためのものです：

.emphasized {
font-style: italic;
}

これによりテキストにスラントをかけます。テキストが囁きかけるようなものです！

CSSフォント - font-weightプロパティ

フォントウェイトはテキストの太さを制御するためのものです：

.important {
font-weight: bold;
}

これによりテキストを強調します。テキストが筋肉を鍛えるようなものです！

CSSフォント - font-synthesisプロパティ

フォントシンセシスはブラウザがフォントの太字や斜体バージョンを生成する方法を制御します：

.no-fake-bold {
font-synthesis: none;
}

これによりブラウザが合成太字バージョンを作成することを防ぎます。ブラウザに「本物に見せないで」と言うようなものです！

CSSフォント - font-variantプロパティ

フォントバリアントは代替글리フを使用するためのものです：

.smallcaps {
font-variant: small-caps;
}

これにより小文字を小さな大文字に変換します。テキストが小さなタキシードを着ているようなものです！

CSSフォント - font-variation-settingsプロパティ

フォント変動設定は可変フォントの特性を細かく制御するためのものです：

.custom-font {
font-variation-settings: "wght" 375, "wdth" 80;
}

これによりカスタムのウェイトと幅を設定します。テキストに medida to measureのスーツを用意するようなものです！

CSS行の高さ

行の高さはテキストの行間のスペースを制御するためのものです：

p {
line-height: 1.5;
}

これにより行の高さをフォントサイズの1.5倍に設定します。テキストに足を伸ばすスペースを与えるようなものです！

CSSフォント - Google Fonts

Google Fontsには無料でウェブに適した多くのフォントがあります：

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
font-family: 'Roboto', sans-serif;
}

これによりRobotoフォントをインポートして使用します。パーソナルなフォントスタイリストを持つようなものです！

CSSフォント - フォールバックフォント

常にフォールバックフォントを提供します：

body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

これにより、好みのフォントが利用できない場合でもテキストが常に見栄えよく表示されるようにします。バックアッププランのバックアップを持つようなものです！

CSSフォント - 概要

ここでカバーしたすべてのフォントプロパティの簡単なまとめを以下に示します：

プロパティ	説明	例
font	複数のフォントプロパティの省略記法	font: italic bold 16px/2 Arial, sans-serif;
font-family	フォントファミリーを指定	font-family: Arial, sans-serif;
font-feature-settings	高度なタイポグラフィ機能を制御	font-feature-settings: "smcp" on;
font-kerning	フォントケルニングを制御	font-kerning: normal;
font-language-override	言語特定の글리フの置き換えをオーバーライド	font-language-override: "JAN";
font-optical-sizing	光学サイズ調整を制御	font-optical-sizing: auto;
font-palette	フォントパレットを指定	font-palette: --custom-palette;
font-size	フォントサイズを設定	font-size: 16px;
font-size-adjust	x-heightに基づいてフォントサイズを調整	font-size-adjust: 0.5;
font-stretch	フォントの伸縮を制御	font-stretch: extra-expanded;
font-style	フォントスタイルを設定	font-style: italic;
font-weight	フォントウェイトを設定	font-weight: bold;
font-synthesis	フォントの合成を制御	font-synthesis: none;
font-variant	フォントバリアントを指定	font-variant: small-caps;
font-variation-settings	可変フォントの特性を制御	font-variation-settings: "wght" 375;
line-height	行の高さを設定	line-height: 1.5;

そして、ここまでがCSSフォントに関する包括的なガイドです。タイポグラフィは芸術の形であり、今あなたはその道具を持っています。幸せなコーディングを愿い、あなたのフォントが常に素晴らしいものであることを祈っています！

Credits: Image by storyset