font-synthesis-weight

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

font-synthesis-weightCSS のプロパティで、フォントファミリーに太字書体がない場合に、ブラウザーが合成するかどうかを指定します。

すべての書体合成値を制御するために、多くの場合は一括指定プロパティ font-synthesis を使用した方が便利です。

構文

css
/* キーワード値 */
font-synthesis-weight: auto;
font-synthesis-weight: none;

/* グローバル値 */
font-synthesis-weight: inherit;
font-synthesis-weight: initial;
font-synthesis-weight: revert;
font-synthesis-weight: revert-layer;
font-synthesis-weight: unset;

auto

不足している太字書体は、必要に応じてブラウザーが合成する可能性があることを示します。

none

不足している太字書体のブラウザーによる合成が許可されていないことを示します。

公式定義

初期値auto
適用対象すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

font-synthesis-weight = 
auto |
none

太字書体の合成の無効化

この例は、 Montserrat フォントでブラウザーによる太字書体の合成をオフにすることを示しています。

HTML

html
<p class="english">
  これは既定の <strong>bold typeface</strong><em>oblique typeface</em> です。
</p>

<p class="english no-syn">
  <strong>bold typeface</strong> はオフになりましたが、 <em>oblique typeface</em> はそうではありません。
</p>

CSS

css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.no-syn {
  font-synthesis-weight: none;
}

結果

仕様書

Specification
CSS Fonts Module Level 4
# font-synthesis-weight

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-synthesis-weight
auto
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報