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-style
にitalic
を指定した後で、font-synthesis
のnone
で加工による斜体を無効化しています。それを段落ごとにフォントファミリーを変えて比較します。
表示確認
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 | 文字フォントの太さを指定する |