CSS - font-synthesis-weight

概要

属性名	font-synthesis-weight
値	auto \| none
初期値	auto
適用可能要素	すべての要素およびテキスト
継承	継承する
サポート	https://caniuse.com/mdn-css_properties_font-synthesis-weight

説明

使用するフォントが、font-weight で指定された太さのフォントをサポートしていない場合、利用可能なフォントから自動生成して表示するか否かをしていします。デフォルトでは自動生成します。

auto: ブラウザが太字などの文字を自動生成して表示します。デフォルト値です。
none: ブラウザの自動生成を抑止します。

使用例

下記の例では Google Fonts から Noto Sans JP フォントの太さ 400 のフォントのみを読み込み、太字 (weight: 700) は読み込まないようにしています。none を指定しない最初の ABC はブラウザが太字を自動生成して表示していますが、2個目の ABC は自動生成が抑止されているため標準の weight: 400 の文字を表示しています。

CSS

.my-example {
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: 32px;
}
.fsw-none {
  font-synthesis-weight: none;
}

HTML

<head>
  ...
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap" rel="weightsheet">
  ...
</head>
<body>
  ...
<span class="my-example">ABC</span>
<span class="my-example fsw-none">ABC</span>
  ...
</body>

表示

ABC ABC

リンク

初版：2025年2月9日、最終更新：2025年2月9日

https://www.tohoho-web.com/css/prop/font-synthesis-weight.htm

CSS - font-synthesis-weight

概要

説明

使用例

関連項目

リンク