CSS/フォント

CSS/フォント

キーワード 説明 備考
sans-serif ゴシック体と思っていい デフォルト
serif ヒゲ付。明朝体みたいなヤツ
monospace 等幅。ソースコードとかで使う文字によって幅が可変しないフォント。フォント名にPがつかないことが多い
fantasy 装飾系
cursive 筆記体

無難なフォント指定

2015-10-20 現在

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;

Google Noto Sans を使う

2019-10-25 現在

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet" />

パラメータとして family の後に自分が使う font-weight を指定しておく。400 と 700 は normal と bold にあたる

body{
    font-family: 'Noto Sans JP', sans-serif;
}

実際として Noto Sans の日本語は Windows 環境では、横棒がかなり細く描画されるため可読性が悪い。 なので、

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:600,700&display=swap" rel="stylesheet" />

このぐらいで指定したほうが、他のアルファベットフォントとバランスがとれる。 600 指定した場合、ブラウザは 400 → 400 以上 500 未満 → 400未満 → 500以上 と検索するのでフォントを normal と bold の2つで使い分けている場合は特に設定を操作する必要は無い。

css/font.txt · 最終更新: 2020-04-03 11:12 by ore