font-synthesis

font-synthesis は CSS のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。

構文

このプロパティは以下の形のうちの一つを取ることができます。

  • キーワード値の none
  • キーワード値の weight と style のどちらか
  • キーワード値の weight と style の両方

値

none
太字およびイタリックの字体を合成しないことを示すキーワードです。
weight
必要であれば、太字の字体を合成してよいことを示すキーワードです。
style
必要であれば、イタリックの字体を合成してよいことを示すキーワードです。

解説

ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。

公式定義

初期値weight style
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
計算値指定値
アニメーションの種類個別

形式文法

none | [ weight || style ]

例

フォント合成の無効化

HTML

<em class="syn">Synthesize me! 站直。</em>
<br/>
<em class="no-syn">Don't synthesize me! 站直。</em>

CSS

em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight;
}
.no-syn {
  font-synthesis: none;
}

結果

仕様書

仕様書 状態 備考
CSS Fonts Module Level 3
font-synthesis の定義		 勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-synthesisChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
完全対応 34
未対応 33 — 34
無効
無効 From version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34Opera Android 未対応 なしSafari iOS 完全対応 9Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

See also