Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!
Summary
The font-synthesis CSS property controls which missing typefaces, bold or italic, may be synthesized by the browser.
| Initial value | weight style |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | order of appearance in the formal grammar of the values |
Syntax
font-synthesis: none; font-synthesis: weight; font-synthesis: style; font-synthesis: weight style; /* Global values */ font-synthesis: initial; font-synthesis: inherit; font-synthesis: unset;
Values
none- This keyword indicates that neither bold nor italic typeface must be synthesized.
weight- This keyword indicates that a bold typeface may be synthesized if needed.
style- This keyword indicates that an italic typeface may be synthesized if needed.
Formal syntax
none | [ weight || style ]
Examples
HTML
<div class="syn">Don't try and synthesize me!</div>
CSS
.syn {font-synthesis: none;}
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Fonts Module Level 3 The definition of 'font-synthesis' in that specification. |
Candidate Recommendation | Initial definition |
Browser Compatibility
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 34 (34) [1] | ? | ? | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 34.0 (34)[1] | ? | ? | ? |
[1] Experimental implementation was available since Gecko 33. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.