font-synthesis-style

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-styleCSS のプロパティで、フォントファミリーに斜体書体がない場合に、ブラウザーが斜体書体を合成するかどうかを指定します。

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

構文

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

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

auto

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

none

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

公式定義

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

形式文法

font-synthesis-style = 
auto |
none

斜体書体の合成の無効化

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

HTML

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

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

CSS

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

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

結果

仕様書

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

ブラウザーの互換性

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-style
auto
none

Legend

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

Full support
Full support

関連情報