font-synthesis
は CSS のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
このプロパティは以下の形のうちの一つを取ることができます。
- キーワード値の
none
- キーワード値の
weight
とstyle
のどちらか - キーワード値の
weight
とstyle
の両方
値
none
- 太字およびイタリックの字体を合成しないことを示すキーワードです。
weight
- 必要であれば、太字の字体を合成してよいことを示すキーワードです。
style
- 必要であれば、イタリックの字体を合成してよいことを示すキーワードです。
解説
ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。
公式定義
初期値 | weight style |
---|---|
適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
形式文法
例
フォント合成の無効化
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 の定義 |
勧告候補 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。