CSS Reference

font-synthesis

太字やイタリックをブラウザが合成するか一括指定する

font-synthesis プロパティは、font-synthesis-weight プロパティ、font-synthesis-style プロパティ、font-synthesis-small-caps プロパティ、font-synthesis-position プロパティの一括指定プロパティです。

フォントファミリーに太字、イタリック、スモールキャピタルがない場合に、ユーザエージェントがそれらのフォントフェイスを合成することを許可するかどうかを指定します。

値は none を単体で指定、もしくは、weight、style、small-caps、position の4つの値を任意で組み合わせて指定できます。

下記は、font-synthesis 一括指定プロパティに対して指定可能な値のバリエーションと、それに対して、各個別のプロパティ値がどのように適用されるかを示した表組みです。

`font-synthesis`	`font-synthesis-weight`	`font-synthesis-style`	`font-synthesis-small-caps`	`font-synthesis-position`
`none`	`none`	`none`	`none`	`none`
`weight`	`auto`	`none`	`none`	`none`
`style`	`none`	`auto`	`none`	`none`
`small-caps`	`none`	`none`	`auto`	`none`
`position`	`none`	`none`	`none`	`auto`
`weight style`	`auto`	`auto`	`none`	`none`
`weight small-caps`	`auto`	`none`	`auto`	`none`
`weight position`	`auto`	`none`	`none`	`auto`
`style small-caps`	`none`	`auto`	`auto`	`none`
`style position`	`none`	`auto`	`none`	`auto`
`small-caps position`	`none`	`none`	`auto`	`auto`
`weight style small-caps`	`auto`	`auto`	`auto`	`none`
`weight style position`	`auto`	`auto`	`none`	`auto`
`weight small-caps position`	`auto`	`none`	`auto`	`auto`
`style small-caps position`	`none`	`auto`	`auto`	`auto`
`weight style small-caps position`	`auto`	`auto`	`auto`	`auto`

font-synthesisの仕様

初期値: weight style small-caps position

対象となる要素: すべての要素
継承: あり

font-synthesisのサンプルソース

font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: small-caps;
font-synthesis: weight style small-caps;

主要ブラウザの対応

IE11	×
Edge（EdgeHTML）	×
Edge（Chromium）	○
Chrome	○
Firefox	○
Safari	○
iOS Safari	○
Android Chrome	○

仕様書

2.8.5. Controlling synthetic faces: the font-synthesis shorthand - CSS Fonts Module Level 4

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

@-規則: @charset
@color-profile
@container
@counter-style
@font-feature-values
@font-palette-values
@keyframes
@layer
@namespace
@page
@property
@scope
@scroll-timeline
@starting-style
@supports
メディアクエリ: prefers-color-scheme
コンテナクエリ: container
container-name
container-type
セレクタ: ID セレクタ
クラスセレクタ
タイプセレクタ
ユニバーサルセレクタ
入れ子セレクタ
子セレクタ
子孫セレクタ
属性セレクタ
間接セレクタ
隣接セレクタ
疑似要素: ::after
::backdrop
::before
::cue
::file-selector-button
::first-letter
::first-line
::marker
::part()
::placeholder
::selection
::slotted()
疑似クラス: :active
:any-link
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:has()
:host
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:state()
:target
:valid
:visited
:where()
CSS関数: acos()
asin()
atan()
atan2()
attr()
brightness()
calc()
calc-size()
circle()
clamp()
color()
color-mix()
cos()
counters()
device-cmyk()
drop-shadow()
ellipse()
env()
exp()
grayscale()
hue-rotate()
hypot()
inset()
invert()
light-dark()
log()
max()
min()
minmax()
mod()
polygon()
pow()
rem()
round()
saturate()
sepia()
sin()
sqrt()
tan()
フォント・テキスト: font-optical-sizing
font-palette
font-synthesis
font-synthesis-position
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant-position
font-variation-settings
hyphenate-character
hyphens
text-spacing-trim
text-underline-offset
text-wrap
text-wrap-mode
text-wrap-style
white-space-collapse
色の指定: accent-color
background-color
color-scheme
light-dark()
背景: background
background-color
ボックス: aspect-ratio
block-size
inline-size
object-fit
object-position
scroll-behavior
配置: anchor()
anchor-name
anchor-size()
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
position-anchor
position-area
ルビ: ruby-align
ruby-position
グラデーション: conic-gradient()
linear-gradient()
radial-gradient()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
アニメーション: @keyframes
@scroll-timeline
animation-timeline
interpolate-size
scroll-timeline
scroll-timeline-axis
scroll-timeline-name
transition-behavior
トランスフォーム: rotate
scale
translate
ユーザーインターフェース: appearance
field-sizing
封じ込め: contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
content-visibility
コンテンツ: quotes
カウンター: counter-set
counters()
スクロールバー: scrollbar-color
scrollbar-gutter
scrollbar-width
SVG: clip-rule
その他: user-select

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

IE11: ::after
::backdrop
::before
::first-letter
::first-line
::selection
:active
:checked
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:fullscreen
:hover
:indeterminate
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:placeholder-shown
:required
:right
:root
:target
:valid
:visited
@charset
@keyframes
@namespace
@page
ID セレクタ
attr()
background
background-color
calc()
hyphens
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
user-select
クラスセレクタ
タイプセレクタ
ユニバーサルセレクタ
子セレクタ
子孫セレクタ
属性セレクタ
間接セレクタ
隣接セレクタ
Edge（EdgeHTML）: ::after
::backdrop
::before
::first-letter
::first-line
::placeholder
::selection
:active
:checked
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:fullscreen
:hover
:in-range
:indeterminate
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:target
:valid
:visited
@charset
@keyframes
@namespace
@page
@supports
ID セレクタ
attr()
background
background-color
brightness()
calc()
counters()
drop-shadow()
grayscale()
hue-rotate()
hyphens
invert()
linear-gradient()
minmax()
prefers-color-scheme
quotes
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
saturate()
sepia()
transition-behavior
user-select
クラスセレクタ
タイプセレクタ
ユニバーサルセレクタ
子セレクタ
子孫セレクタ
属性セレクタ
間接セレクタ
隣接セレクタ
Edge（Chromium）: ::after
::backdrop
::before
::cue
::file-selector-button
::first-letter
::first-line
::marker
::part()
::placeholder
::selection
::slotted()
:active
:any-link
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:has()
:host
:hover
:in-range
:indeterminate
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:state()
:target
:valid
:visited
@charset
@color-profile
@container
@counter-style
@font-feature-values
@font-palette-values
@keyframes
@layer
@namespace
@page
@property
@scope
@starting-style
@supports
ID セレクタ
accent-color
acos()
anchor()
anchor-name
anchor-size()
animation-timeline
appearance
asin()
aspect-ratio
atan()
atan2()
attr()
background
background-color
block-size
brightness()
calc()
calc-size()
circle()
clamp()
clip-rule
color()
color-mix()
color-scheme
conic-gradient()
contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
content-visibility
cos()
counter-set
counters()
drop-shadow()
ellipse()
env()
exp()
field-sizing
font-optical-sizing
font-palette
font-synthesis
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant-position
font-variation-settings
grayscale()
hue-rotate()
hyphenate-character
hyphens
hypot()
inline-size
inset
inset()
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
interpolate-size
invert()
light-dark()
linear-gradient()
log()
max()
min()
minmax()
mod()
object-fit
object-position
polygon()
position-anchor
position-area
pow()
prefers-color-scheme
quotes
radial-gradient()
rem()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rotate
round()
ruby-align
ruby-position
saturate()
scale
scroll-behavior
scroll-timeline
scroll-timeline-axis
scroll-timeline-name
scrollbar-color
scrollbar-gutter
scrollbar-width
sepia()
sin()
sqrt()
tan()
text-spacing-trim
text-underline-offset
text-wrap
transition-behavior
translate
user-select
white-space-collapse
クラスセレクタ
タイプセレクタ
ユニバーサルセレクタ
入れ子セレクタ
子セレクタ
子孫セレクタ
属性セレクタ
間接セレクタ
隣接セレクタ
Firefox: ::after
::backdrop
::before
::cue
::file-selector-button
::first-letter
::first-line
::marker
::part()
::placeholder
::selection
::slotted()
:active
:any-link
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:has()
:host
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown
:read-only
:read-write
:required
:root
:scope
:state()
:target
:valid
:visited
:where()
@charset
@color-profile
@container
@counter-style
@font-feature-values
@font-palette-values
@keyframes
@layer
@namespace
@page
@property
@scroll-timeline
@starting-style
@supports
ID セレクタ
accent-color
acos()
appearance
asin()
aspect-ratio
atan()
atan2()
attr()
background
background-color
block-size
brightness()
calc()
circle()
clamp()
clip-rule
color()
color-mix()
color-scheme
conic-gradient()
contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
content-visibility
cos()
counter-set
counters()
drop-shadow()
ellipse()
env()
exp()
font-optical-sizing
font-palette
font-synthesis
font-synthesis-position
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant-position
font-variation-settings
grayscale()
hue-rotate()
hyphenate-character
hyphens
hypot()
inline-size
inset
inset()
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
invert()
light-dark()
linear-gradient()
log()
max()
min()
minmax()
mod()
object-fit
object-position
polygon()
pow()
prefers-color-scheme
quotes
radial-gradient()
rem()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rotate
round()
ruby-align
ruby-position
saturate()
scale
scroll-behavior
scrollbar-color
scrollbar-gutter
scrollbar-width
sepia()
sin()
sqrt()
tan()
text-underline-offset
text-wrap
text-wrap-mode
text-wrap-style
transition-behavior
translate
user-select
white-space-collapse
クラスセレクタ
タイプセレクタ
ユニバーサルセレクタ
入れ子セレクタ
子セレクタ
子孫セレクタ
属性セレクタ
間接セレクタ
隣接セレクタ
Chrome: ::after
::backdrop
::before
::cue
::file-selector-button
::first-letter
::first-line
::marker
::part()
::placeholder
::selection
::slotted()
:active
:any-link
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:has()
:host
:hover
:in-range
:indeterminate
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:state()
:target
:valid
:visited
@charset
@color-profile
@container
@counter-style
@font-feature-values
@font-palette-values
@keyframes
@layer
@namespace
@page
@property
@scope
@starting-style
@supports
ID セレクタ
accent-color
acos()
anchor()
anchor-name
anchor-size()
animation-timeline
appearance
asin()
aspect-ratio
atan()
atan2()
attr()
background
background-color
block-size
brightness()
calc()
calc-size()
circle()
clamp()
clip-rule
color()
color-mix()
color-scheme
conic-gradient()
contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
content-visibility
cos()
counter-set
counters()
drop-shadow()
ellipse()
env()
exp()
field-sizing
font-optical-sizing
font-palette
font-synthesis
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant-position
font-variation-settings
grayscale()
hue-rotate()
hyphenate-character
hyphens
hypot()
inline-size
inset
inset()
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
interpolate-size
invert()
light-dark()
linear-gradient()
log()
max()
min()
minmax()
mod()
object-fit
object-position
polygon()
position-anchor
position-area
pow()
prefers-color-scheme
quotes
radial-gradient()
rem()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rotate
round()
ruby-align
ruby-position
saturate()
scale
scroll-behavior
scroll-timeline
scroll-timeline-axis
scroll-timeline-name
scrollbar-color
scrollbar-gutter
scrollbar-width
sepia()
sin()
sqrt()
tan()
text-spacing-trim
text-underline-offset
text-wrap
transition-behavior
translate
user-select
white-space-collapse
クラスセレクタ
タイプセレクタ
ユニバーサルセレクタ
入れ子セレクタ
子セレクタ
子孫セレクタ
属性セレクタ
間接セレクタ
隣接セレクタ
Safari: ::after
::before
::cue
::file-selector-button
::first-letter
::first-line
::marker
::part()
::placeholder
::selection
::slotted()
:active
:any-link
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:has()
:host
:hover
:in-range
:indeterminate
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:state()
:target
:valid
:visited
@charset
@color-profile
@container
@counter-style
@font-feature-values
@font-palette-values
@keyframes
@layer
@namespace
@page
@property
@scope
@starting-style
@supports
ID セレクタ
accent-color
acos()
appearance
asin()
aspect-ratio
atan()
atan2()
attr()
background
background-color
block-size
brightness()
calc()
circle()
clip-rule
color()
color-mix()
color-scheme
conic-gradient()
contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
content-visibility
cos()
counter-set
counters()
drop-shadow()
ellipse()
env()
exp()
font-optical-sizing
font-palette
font-synthesis
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant-position
font-variation-settings
grayscale()
hue-rotate()
hyphenate-character
hyphens
hypot()
inline-size
inset
inset()
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
invert()
light-dark()
linear-gradient()
log()
max()
min()
minmax()
mod()
object-fit
object-position
polygon()
pow()
prefers-color-scheme
quotes
radial-gradient()
rem()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rotate
round()
ruby-position
saturate()
scale
scroll-behavior
sepia()
sin()
sqrt()
tan()
text-underline-offset
text-wrap
text-wrap-mode
text-wrap-style
transition-behavior
translate
user-select
white-space-collapse
クラスセレクタ
タイプセレクタ
ユニバーサルセレクタ
入れ子セレクタ
子セレクタ
子孫セレクタ
属性セレクタ
間接セレクタ
隣接セレクタ
iOS Safari: ::after
::before
::cue
::file-selector-button
::first-letter
::first-line
::marker
::part()
::placeholder
::selection
::slotted()
:active
:any-link
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:has()
:host
:hover
:in-range
:indeterminate
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:state()
:target
:valid
:visited
@charset
@color-profile
@container
@counter-style
@font-feature-values
@font-palette-values
@keyframes
@layer
@namespace
@page
@property
@scope
@starting-style
@supports
ID セレクタ
accent-color
acos()
appearance
asin()
aspect-ratio
atan()
atan2()
attr()
background
background-color
block-size
brightness()
calc()
circle()
clip-rule
color()
color-mix()
color-scheme
conic-gradient()
contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
content-visibility
cos()
counter-set
counters()
drop-shadow()
ellipse()
env()
exp()
font-optical-sizing
font-palette
font-synthesis
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant-position
font-variation-settings
grayscale()
hue-rotate()
hyphenate-character
hyphens
hypot()
inline-size
inset
inset()
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
invert()
light-dark()
linear-gradient()
log()
max()
min()
minmax()
mod()
object-fit
object-position
polygon()
pow()
prefers-color-scheme
quotes
radial-gradient()
rem()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rotate
round()
ruby-position
saturate()
scale
scroll-behavior
sepia()
sin()
sqrt()
tan()
text-underline-offset
text-wrap
text-wrap-mode
text-wrap-style
transition-behavior
translate
user-select
white-space-collapse
クラスセレクタ
タイプセレクタ
ユニバーサルセレクタ
入れ子セレクタ
子セレクタ
子孫セレクタ
属性セレクタ
間接セレクタ
隣接セレクタ
Android Chrome: ::after
::backdrop
::before
::cue
::file-selector-button
::first-letter
::first-line
::marker
::part()
::placeholder
::selection
::slotted()
:active
:any-link
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:has()
:host
:hover
:in-range
:indeterminate
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:state()
:target
:visited
@charset
@color-profile
@container
@counter-style
@font-feature-values
@font-palette-values
@keyframes
@layer
@namespace
@page
@property
@scope
@starting-style
@supports
ID セレクタ
accent-color
acos()
anchor()
anchor-name
anchor-size()
animation-timeline
appearance
asin()
aspect-ratio
atan()
atan2()
attr()
background
background-color
block-size
brightness()
calc()
calc-size()
circle()
clamp()
clip-rule
color()
color-mix()
color-scheme
conic-gradient()
contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
content-visibility
cos()
counter-set
counters()
drop-shadow()
ellipse()
env()
exp()
field-sizing
font-optical-sizing
font-palette
font-synthesis
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant-position
font-variation-settings
grayscale()
hue-rotate()
hyphenate-character
hyphens
hypot()
inline-size
inset
inset()
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
interpolate-size
invert()
light-dark()
linear-gradient()
log()
max()
min()
minmax()
mod()
object-fit
object-position
polygon()
position-anchor
position-area
pow()
prefers-color-scheme
quotes
radial-gradient()
rem()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rotate
round()
ruby-align
ruby-position
saturate()
scale
scroll-behavior
scroll-timeline
scroll-timeline-axis
scroll-timeline-name
scrollbar-color
scrollbar-gutter
scrollbar-width
sepia()
sin()
sqrt()
tan()
text-spacing-trim
text-underline-offset
text-wrap
transition-behavior
translate
user-select
white-space-collapse
クラスセレクタ
タイプセレクタ
ユニバーサルセレクタ
入れ子セレクタ
子セレクタ
子孫セレクタ
属性セレクタ
間接セレクタ
隣接セレクタ