HTML&CSS

【CSS】文字の種類を指定するfont-familyプロパティの使い方

【CSS】文字の種類を指定するfont-familyプロパティ

CSSで文字の種類を指定するプロパティはfont-familyです。

文字の種類を変えるには「font-family: フォント名; 」とすることで、要素にそのフォントを適用できます。

ゴシック体の総称フォント名「sans-serif」を使った場合は下記になります。

 css
h1{
	font-family: sans-serif;
}

また、「遊ゴシック Yu Gothic」などのようにフォント名にスペースがある場合は、ダブルクォーテーションで囲みます。

 css
h1{
	font-family: "Yu Gothic";
}

【CSS】文字の種類を指定するfont-familyプロパティの使い方

通常はサイト全体のフォントを指定することが多いため、対象となる要素名(セレクタ)は「body」に「font-familyプロパティ」を記述することが多いです。

 css
body{
	font-family: "Yu Gothic";
}

次に、要素ごとにフォントを変える場合は、対象となる要素名(セレクタ)にそれぞれに「font-familyプロパティ」を記述していきます。

 css
h1{
	color: #FF0000;
	font-size: 40px;
	font-family: "Yu Gothic";
}
p{
	color: #FF0000;
	font-size: 10px;
	font-family: sans-serif;
}

文字の大きさを指定するプロパティはfont-sizeです。

文字の大きさは「px(ピクセル」という単位を用いて指定しますので、下記のようなコードになります。

 css
h1{
	color: #FF0000;
	font-size: 40px;
}







-HTML&CSS

© 2021 Issy9174 official web site