font-synthesisプロパティの説明
CSSのfont-synthesisプロパティは、フォントが太字や斜体に対応していなかった場合に、ブラウザの加工を受け入れるかどうかを指定します。標準的な欧文フォントであれば、豊富な文字セットが用意されているため意識しませんが、日本語や中国語などの文字種の多いフォントファミリーではスタイルのバリエーションを実装することが難しく、結果として合成された出力を見る可能性があります。
文字の大きさやフォントの種類によっては、合成されたテキストは可読性を損なう恐れがあるため、この機能を無効にする選択肢も視野に入れて下さい。
font-synthesisに指定できる値
none- ブラウザがフォントを加工して出力することを許可しません。太字や斜体に適応するフォントでなければ、それを無視して既定のテキストを表示します。
style- 斜体に関する加工を許可します。斜体に対応するフォントでなければ、ブラウザは文字を加工して出力しようとします。
weight- 太字に関する加工を許可します。太字に対応するフォントでなければ、ブラウザは文字を加工して出力しようとします。
small-caps- スモールキャップに関する加工を許可します。スモールキャップに対応するフォントでなければ、ブラウザは文字を加工して出力しようとします。
font-synthesisの使い方とサンプルコード
font-synthesisプロパティの構文は以下の通りです。
/* キーワード値 */
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-styleにitalicを指定した後で、font-synthesisのnoneで加工による斜体を無効化しています。それを段落ごとにフォントファミリーを変えて比較します。
<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>
.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";
}