font-weight:medium;のみ、なぜか無効になるので解決したいです。

Question

現状

Google FontsのNoto Sans CJK JPをダウンロードし、サブセットとWOFF化した後、@font-faceで以下のように設定しました。

@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local("Noto Sans CJK JP Regular"),
  url('../fonts/NotoSansCJKjp-Regular.woff2') format('woff2'),
  url('../fonts/NotoSansCJKjp-Regular.woff') format('woff'),
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: medium;
  font-display: swap;
  src: local("Noto Sans CJK JP Medium"),
  url('../fonts/NotoSansCJKjp-Medium.woff2') format('woff2'),
  url('../fonts/NotoSansCJKjp-Medium.woff') format('woff'),
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: local("Noto Sans CJK JP Bold"),
  url('../fonts/NotoSansCJKjp-Bold.woff2') format('woff2'),
  url('../fonts/NotoSansCJKjp-Bold.woff') format('woff'),
}

そしてfont-weight: normal;のように各HTML要素に太さを指定しているのですが、なぜかmediumのみ無効となっています。(Chromeデベロッパーツールでinvalid property valueとなっておりfont-weight: medium;が打ち消されています)

試したこと

• 各フォントファイルのサブセットとWOFFコンバートを再度行った

→変わらず

• @font-faceのfont-weightを500と指定した

→変わらず

追記

@font-faceのfont-weightを500とし、HTMLの要素に太さを指定する際もfont-weight: 500;を指定するとなぜか適用されました。

解決したいこと

• normal, medium, boldの3種類のフォントをCSSで設定したがなぜかmediumだけが無効となっている問題。
• なぜmediumは無効になりnormal,bold,500は適用されるのか。

ちなみにNoto Sans CJK JP におけるmedium=500です。

Answer 1

なぜmediumは無効になりnormal,bold,500は適用されるのか。

その指定値が無いからでは。

【font-weight - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/font-weight

/* キーワード値 */
font-weight: normal;
font-weight: bold;

/* 親要素に対して相対的なキーワード値 */
font-weight: lighter;
font-weight: bolder;

Comments

[ry0xi]

確かに…。
CSSでは無かったですね。
ありがとうございます。