どうも！ニシドラ(@nishidorablog)です。
この記事では、font-weightプロパティについて解説します。
font-weightプロパティとは、文字フォントの太さを指定するためのプロパティです。
font-weightプロパティとはどんなプロパティなのかと指定する値、注意点について解説していきます。
当ブログ(ニシドラブログ)では、他にもCSSの使い方について解説をしています。
font-weightプロパティとは
「font-weightプロパティ」とは、フォントの太さを指定するプロパティです。
「weight」は英語で重さや重量という意味があり、読み方は「ウエイト」です。
指定する方法として一般的に、「normal」「bold」「lighter」「bolder」の4つの値でできます。
指定する値と使い方
normal
「normal」は英語で標準という意味です。
font-weigthプロパティを指定していない場合、文字フォントの初期値がこのnormalになっています。
以下のようなコード(左：html 右：css)を例にあげます。
「文字の太さを変える2」にnormalを指定するため、「font1」というクラス名を付けています。
<p>文字の太さを変える1</p>
<p class=”font1″>文字の太さを変える2</p>
.font1 { font-weight: normal; }
このコードをテキストエディタに入力し、ブラウザ上で表示させると右画像のようになります。
文字の太さが変わっていないことから、normalが初期値であることがわかります。
bold
「bold」は英語で太字という意味で、文字を太くするにはfont-weightプロパティにboldを指定します。
「文字の太さを変える2」という文章を太字に変えるためboldを指定します。
個別で指定するため「font2」というクラス名を付けます。
<p>文字の太さを変える1</p>
<p class=”font2″>文字の太さを変える2</p>
.font2 { font-weight: bold; }
このコードをテキストエディタに入力し、ブラウザ上で表示させると右画像のようになります。
boldを指定することで文字が太くなりました。
lighterとbolder
「lighter」と「bolder」はそれぞれ、一段階細く、一段階太くという意味を持っています。
この「一段階」とはデフォルトの値、つまりnormalから一段階細く・太くします。
使うときの注意点
長い文章に太文字は使わない
長い文章に太文字を使っていしまうと、メリハリがなくなり読みにくくなってしまいます。
上右画像のように文字を太くする場合は、文中で強調したい箇所に使いましょう。
適用できないフォントがある
フォントの種類によってはlighterやbolderが適用されない場合があります。
理由は「フォントがlighterやbolderに対応していない」からです。
どうしても変えたい場合は、フォントを別のものに変えて適用させましょう。
まとめ
これまで「font-weigthプロパティ」について解説してきました。
HTMLを勉強している方なら知っていると思いますが、「bタグ」や「strongタグ」を使うことで文字を太くすることも可能です。
しかし、文字を太くしたい箇所にタグを記述していくのは時間もかかるしめんどくさいですよね。
そんなときは、font-weigthプロパティでまとめて変えた方が楽なのでぜひ使ってみてください。
次回は、line-heightプロパティについて、【line-heightプロパティ】CSSで行間の幅を変える方法で解説します。
コメント