html・csscssでのフォントの設定方法です。fontに関する設定全般について紹介していきます!フォントとは、pcで文字を表示したり印刷したりする時の文字の形の事です。pcには予めゴシック体や明朝体などのフォントが入っているので、フォント名やフォントサイズをcssやhtmlで指定してあげるだけで、好きな形の文字を表示する事が出来るのです。それぞれの設定方法をご紹介していきますね。目次フォントサイズの設定font-weightの設定方法font-familyの指定方法font-styleの設定方法font-variantの設定line-heightの設定方法fontプロパティ(まとめて設定)フォントサイズの設定font-sizeプロパティでは、フォント(文字)の大きさを設定することができます。フォントサイズは下のようなプロパティを使ってpxなどの単位を付けて指定することができます。font-size:10px;}フォントサイズを設定する時の単位には下のような種類があります。ミリメートルemをよく見かけることがあると思います。emってイマイチわかりづらいですよね。emの意味を簡単に説明しますね。親要素のフォントサイズを12pxに設定していたとします。1.5em;」のように記述したとします。この場合pタグのフォントサイズは、親要素のフォントサイズ12pxの1.5倍の18pxで表示されるということです。いっても、親要素が~って説明だとイマイチわかりづらいと思うので、詳しくはフォントサイズのページにて紹介します。フォントサイズで使える単位や表示例についてもそちらで詳しく紹介します。フォントサイズについて詳しくはこちらcssフォントサイズの指定方法と文字の大きさの違いfont-weightの設定方法font-weightプロパティは、フォント(文字)の太さを指定する時に使います。太さは100~900の9段階から指定できるほか、normal、boldなどのキーワードでも指定することができます。親要素に設定した値より1段太くなる(数値の場合+100)bolder、lighterは、この説明だとちょっとわかりづらいですよね。詳しくはfont-weightのページでご紹介します。他にも各キーワードや数値での表示例なども紹介します。font-weightについて詳しくは下cssのfont-weightで文字の太さを設定しようfont-familyの指定方法font-familyプロパティでは、フォントの種類(文字の形の種類)を指定することができます。Pゴシックなど指定するフォントの種類は、カンマ(,)で区切って複数並べる事ができます。ゴシックのようにフォント名の中にスペースがあるものは、シングルクォーテーション「’」もしくはダブルクォーテーション「”」で囲みます。スペースがないフォント名には、基本的に必要ないです。それと複数のフォントを指定する事ができますが、左側のフォントから優先されて適用されます。詳しくはfont-familyのページで紹介します。他にもfont-familyの種類なども掲載します。フォントのスタイルというのは標準であったり、イタリックだったり、斜体だったりというのです。フォントを傾けるか傾けないかの設定ができるプロパティです。立体を斜めにしたような字体のフォント表示例フォントスタイル(normal)フォントスタイル(italic)フォントスタイル(oblique)font-variantの設定font-variantプロパティは、フォントをスモールキャップする時に使います。いうような、通常の大文字より小さいサイズの大文字で表現されるような事をスモールキャップといいます。※小文字の表示形式が小文字サイズの大文字になっている物のこと。font-variant:small-caps;}<p>ABCDEFGabcdefg</p>表示例ABCDEFGabcdifgline-heightの設定方法line-heightプロパティは、行の高さを設定する時に使います。font-size:14px;を指定していて、line-height:20px;のように指定するとします。この場合、line-heightの20px(行の高さ)からフォントサイズの14pxを引いた残りの6pxが、行間として上下に3pxずつ割り当てられるという事です。ちなみに、指定したフォントサイズの値(~pxなど)よりline-heightの値(行の高さ)が小さい場合は、行が重なって表示されます。line-height:10px;}line-heightで指定できる値は「normal」「pxなどの単位」「1などの実数」「%」の種類があります。表示例や注意点などの詳しい説明は下のページで紹介します。「font-style」「font-weight」「font-variant」「font-size」「line-height」「font-family」などのfontに関する設定をまとめて行う事ができます。明朝";}fontプロパティでまとめて設定を行う際は「font-size」「font-family」は省略できませんので注意して下さい。記述する順番は「font-style」「font-weight」「font-variant」「font-size」「line-height」「font-family」の順番になります。このうち「font-style」「font-weight」「font-variant」の3つは、順不同となるので自由に入れ替えて大丈夫です。