font-synthesis-small-caps
The font-synthesis-small-caps CSS property lets you specify whether or not the browser may synthesize small-caps typeface when it is missing in a font family. Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.
It is often convenient to use the shorthand property font-synthesis to control all typeface synthesis values.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 97 | 97 | 111 | 16.4 | 97 | 16.4 | |
auto | 97 | 97 | 111 | 16.4 | 97 | 16.4 |
none | 97 | 97 | 111 | 16.4 | 97 | 16.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.no-synth-caps {
font-variant-caps: small-caps;
font-synthesis-small-caps: none;
}
.allow-synth {
font-synthesis-small-caps: auto;
}Live demo
Use cases
-
Using font-synthesis-small-caps
The font-synthesis-small-caps CSS property lets you specify whether or not the browser may synthesize small-caps typeface when it is missing in a font family.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.