フォント
font-synthesis
font-synthesis は、フォントに太字や斜体、スモールキャピタルの字形が無いときに、ブラウザがふつうの字形を変形して代わりを作ってよいかを決めます。
構文
none | [ weight || style || small-caps || position ]プレビュー
ショートハンドの内訳
font-synthesisコード
.box {
font-family: Inter, sans-serif;
font-style: italic;
font-variant-caps: small-caps;
font-synthesis: none;
}コントロール
解説
値の書き方
none か、次のキーワードを 1 つ以上、空白で区切って並べます（順番は自由です）。並べたものは作ってよく、並べなかったものは作りません。none はどれも作りません。
weight：太字を、字の線を太らせて作ります。style：斜体を、字を傾けて作ります。small-caps：スモールキャピタル（小文字の代わりに置く小さな大文字）を、大文字を縮めて作ります。position：font-variant-positionの上付き・下付き文字を、字を小さくしてずらして作ります。Firefox のみ対応で、Chrome・Edge・Safari ではpositionを含む宣言がまるごと無視されます。
初期値は 4 つすべてを並べた weight style small-caps position で、どれも作ってかまいません。
日本語を傾けないようにする
日本語のフォントのほとんどには斜体の字形がありません。そのため font-style: italic を指定すると、ブラウザが字を傾けて斜体を作ります。英語の部分だけ斜体にして、日本語は傾けたくないときは、font-synthesis から style を外します。斜体の字形を持つ英語のフォントはそのまま斜体で表示され、斜体の無い日本語のフォントはまっすぐのまま表示されます。
個別のプロパティ
font-synthesis は、font-synthesis-weight・font-synthesis-style・font-synthesis-small-caps・font-synthesis-position の一括指定です。それぞれ作ってよいなら auto、作らないなら none を取ります。font-synthesis-position も Firefox のみ対応です。
太さの軸を持つ可変フォントで太くしたり、フォントに入っているスモールキャピタルの字形を使ったりするのは、作ったことにはなりません。この指定に関係なく、そのまま使われます。
このページのプレビューは、どの環境でも同じように見えるように、補助の宣言でサイトが読み込んでいる Inter にし、斜体 (font-style: italic) とスモールキャピタル (font-variant-caps: small-caps) にしています。Inter には斜体とスモールキャピタルの字形が無く、日本語のフォントにも斜体が無いので、style を外すと字がまっすぐに戻り、small-caps を外すと「bc」が小文字に戻ります。weight で変わるかどうかは、表示に使われる日本語のフォントに太字の字形があるかどうかで決まります（Inter は太さの軸を持つ可変フォントなので、英字は変わりません）。