htmlタグでフォント指定は非推奨!cssで設定する方法まとめ

2018年9月21日ウェブマーケティングCSS,font-family,HTML,タグ,フォント,指定

HTML5に移ってきた今、htmlのフォントタグでフォント指定を行っているサイトは少ないと思います。

現在はデザインや装飾に関する部分は、完全にcssに切り出して記述するのが正しい書き方とされています。(PageSpeed Insightsでサイトの診断を行うと、cssのインライン化(=小さいcssファイルをhtmlタグの中に入れ込むこと)を改善案として提示してきますが、保守性考えて僕は無視しています。)

htmlのフォントタグで指定する例は、「文章の一部分だけフォントを変えたい時」くらいだと思いますが、その場合もcssでの指定が必要になります。

htmlのfont(フォントタグ)を使っている場合は、非推奨なのでただちにcssの"font-family“で指定しよう

未だに下記のようなフォント指定の方法を行っていませんか?

<font size="5" face="MS 明朝,平成明朝">明朝体</font>

これは今すぐ下記の方法で書き換えましょう。

body {
    font-family: "MS Pゴシック", sans-serif;
    font-size: 17px;
}

body要素に"font-family"を指定し、各要素(pとかhとか)にそれぞれ"font-size"等を上書きするのが管理しやすい

上の例は適当なのであれですが、基本的にほとんどフォントを弄ることは無いと思うので、"font-family"はbody要素に指定して、フォントサイズや色等は各要素で指定しましょう。

よく使うcssのfontプロパティまとめ

参考:TAGindex

color: 色を指定する

font-size: 文字の大きさを指定する

font-family: フォントを指定する

font-weight: 文字の太さを指定する

font-style: 斜体やイタリックを指定する