同じfont-familyで普通文字と太字の正しい設定方法
cssで @font-face
を設定する場合の方法を学びを共有します。
文字の太さの種類でフォントを設定する場合
@font-face { font-family: "Noto Sans CJK JP"; font-weight: 400; font-style: normal; src: local("Noto Sans CJK JP"), url(NotoSansCJKjp-Regular.woff2) format("woff2"), url(NotoSansCJKjp-Regular.woff) format("woff"), url(NotoSansCJKjp-Regular.ttf) format("ttf"); } @font-face { font-family: "Noto Sans CJK JP"; font-weight: 700; font-style: bold; src: local("Noto Sans CJK JP"), url(NotoSansCJKjp-Bold.woff2) format("woff2"), url(NotoSansCJKjp-Bold.woff) format("woff"), url(NotoSansCJKjp-Bold.ttf) format("ttf"); }
normal
と bold
の設定はこれでOK!
フォントファイルのフォーマット woff2
woff
ttf
はそれぞれデバイスによって対応がバラバラなので設定しておきます。
local
の指定は、ローカルにそのフォントがある場合はそちらを参照するようになります。
自分のPCにこのフォントが入っている場合は余計な処理が発生しなくなるので設定しておいた方がいいでしょう。
あとは html
なり body
なりに font-family
で設定しましょう。
例えば
h1 { font-weight: bold; }
これで h1
に Noto Sans CJK JP
が反映されるようになりました。
補足
@で(at-rule)書かれているのは、CSSでスタイルシートを記述するにあたっての ルールを定義
しています。
@font-face
は、ダウンロードされる外部フォントを定義します。