font-synthesis:太字や斜体に対応していないフォントの加工を制御する

初期値 weight style
適用対象 全ての要素、::first-letterおよび::first-line
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

font-synthesisプロパティの説明

font-synthesisは、フォントが太字や斜体に対応していなかった場合に、ブラウザの加工を受け入れるかどうかを指定します。標準的な欧文フォントであれば、豊富な文字セットが用意されているため意識しませんが、日本語や中国語などの文字種の多いフォントファミリーではスタイルのバリエーションを実装することが難しく、結果として合成された出力を見る可能性があります。

文字の大きさやフォントの種類によっては、合成されたテキストは可読性を損なう恐れがあるため、この機能を無効にする選択肢も視野に入れて下さい。

font-synthesisに指定できる値

none
ブラウザがフォントを加工して出力することを許可しません。太字や斜体に適応するフォントでなければ、それを無視して既定のテキストを表示します。
style
斜体に関する加工を許可します。斜体に対応するフォントでなければ、ブラウザは文字を加工して出力しようとします。
weight
太字に関する加工を許可します。太字に対応するフォントでなければ、ブラウザは文字を加工して出力しようとします。
small-caps
スモールキャップに関する加工を許可します。スモールキャップに対応するフォントでなければ、ブラウザは文字を加工して出力しようとします。

font-synthesisの使い方とサンプル

font-synthesisプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
font-synthesis: none;
font-synthesis: style;
font-synthesis: weight;
font-synthesis: small-caps;

/* 複数の値 */
font-synthesis: weight style small-caps;

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

font-synthesisの実例

それでは実際にfont-synthesisプロパティの書き方を見ていきましょう。以下の例では、font-styleitalicを指定した後で、font-synthesisnoneで加工による斜体を無効化しています。それを段落ごとにフォントファミリーを変えて比較します。

表示確認
CSS
.samp_box {
	overflow: auto;
	width: 100%;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
	font-style: italic;
	font-synthesis: none;
}
.ff_1 {
	font-family: "Hiragino Kaku Gothic Pro";
}
.ff_2 {
	font-family: "Yu Gothic";
}
.ff_3 {
	font-family: "Yu Mincho";
}
.ff_4 {
	font-family: "Meiryo";
}
.ff_5 {
	font-family: "Osaka";
}
HTML
<section class="samp_box">
	<h2>font-synthesis: none;</h2>
	<p class="ff_1">この段落のフォントは "Hiragino Kaku Gothic Pro" です。</p>
	<p class="ff_2">この段落のフォントは "Yu Gothic" です。</p>
	<p class="ff_3">この段落のフォントは "Yu Mincho" です。</p>	
	<p class="ff_4">この段落のフォントは "Meiryo" です。</p>
	<p class="ff_5">この段落のフォントは "Osaka" です。</p>
</section>

font-synthesisに関連するCSSプロパティ

フォント・文字色
color 文字の色を指定する
font フォントに関する様々な機能を一括で指定する
font-family 文字フォントの種類を指定する
font-feature-settings OpenTypeフォントの拡張書体の特性を制御する
font-kerning フォントの文字詰め(カーニング)を制御する
font-language-override 文字を表示する祭に使用する言語情報を一時的に変更する
font-size 文字フォントの大きさを指定する
font-size-adjust 現在のフォントサイズを基準に小文字の大きさを相対的に調整する
font-stretch 表示させるフォントの幅広や幅狭のフェイスを指定する
font-style フォントを筆記体や斜体で表示するかどうかを指定する
font-synthesis 太字や斜体に対応していないフォントの加工を制御する
font-variant フォントの表示形式やブラウザの合成規則を一括で指定する
font-variant-alternates 文字フォントの代替字体(グリフ)の選定を制御する
font-variant-caps 文字列に適用されるキャピタライゼーションルールを制御する
font-variant-east-asian 東アジアの言語で使われる字体を制御する
font-variant-ligatures 隣り合った文字フォントの合字(リガチャ)を制御する
font-variant-numeric 数値に関する文字表記を制御する
font-variant-position 上付き文字や下付き文字として配置されるべき字体の使用を制御する
font-weight 文字フォントの太さを指定する