CSS フォント
CSSマニュアルCSSフォントのプロパティは、フォント、太字、サイズ、およびテキストスタイルをカスタマイズすることができます。
フォントファミリーの設定（よく使う）
font-familyプロパティを使用して、テキストに適用されるフォントファミリーを設定します。
一般的なフォントファミリー名または特定のフォント名を指定できます。また、複数のフォントファミリーをカンマで区切って指定し、ブラウザが順番に適用を試みるフォントのフォールバックリストを作成できます。
/* フォントファミリーの設定 */
p {
font-family: Arial, Helvetica, sans-serif;
}フォントサイズの設定（よく使う）
font-sizeプロパティを使用して、テキストのフォントサイズを設定します。
単位には、px（ピクセル）、em（相対的な単位）、rem（ルート要素に対する相対的な単位）、%（親要素のフォントサイズに対するパーセント）などがあります。
/* フォントサイズの設定 */
p {
font-size: 16px;
}
フォントスタイルの設定（あまり使わない）
font-styleプロパティを使用して、テキストのフォントスタイルを設定します。
通常、イタリック体やオブリーク体を適用するために使用されます。利用可能な値は、normal（デフォルト）、italic、obliqueです。
/* イタリック体の設定 */
em {
font-style: italic;
}フォントの太さの設定（よく使う）
font-weightプロパティを使用して、フォントの太さを設定します。
利用可能な値には、normal（デフォルト）、bold、bolder、lighter、または数値（100から900までの範囲）があります。
/* フォントウェイトの設定 */
strong {
font-weight: bold;
}以下に、これまでに説明したいくつかのプロパティを組み合わせた例を示します。
/* 複数のフォントプロパティを組み合わせる */
h1 {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-style: italic;
font-weight: 700;
text-transform: uppercase;
}フォントのショートハンド
fontプロパティは、一度に複数のフォント関連のプロパティを設定するショートハンド（一括指定）です。
以下の例では、fontプロパティを使用して、font-style、font-weight、font-size、およびfont-familyを一度に設定しています。
/* フォントのショートハンド */
p {
font: italic bold 16px/1.5 'Roboto', sans-serif;
}この例では、font-sizeの後に/が続いており、これはline-heightプロパティの値を指定しています。この場合、1.5は行の高さがフォントサイズの1.5倍になることを意味します。
ショートハンドの書き方には一定の順序があります。ルールは以下の通りです。
font-style/font-variant/font-weight（必要に応じて指定します。順番はどちらが先でも構いません。）font-size（必須）line-heightfont-family（必須）
コメント