font-synthesis-position
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The font-synthesis-position CSS property lets you specify whether or not a browser may synthesize the subscript and superscript "position" typefaces when they are missing in a font family, while using font-variant-position to set the positions.
The font-synthesis-position property has no effect when using the <sup> and <sub> elements.
It is often convenient to use the shorthand property font-synthesis to control all typeface synthesis values.
Syntax
/* Keyword values */ font-synthesis-position: auto; font-synthesis-position: none; /* Global values */ font-synthesis-position: inherit; font-synthesis-position: initial; font-synthesis-position: revert; font-synthesis-position: revert-layer; font-synthesis-position: unset; Values
Formal definition
| Initial value | none |
|---|---|
| Applies to | all elements and text. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
font-synthesis-position =
auto |
none
Examples
Disabling synthesis of position typeface
This example shows turning off synthesis of the superscript and subscript typefaces by the browser in the Montserrat font.
HTML
<p> These are the default position <span class="super">superscript</span>, position <span class="sub">subscript</span>, <strong>bold</strong> and <em>oblique</em> typefaces. </p> <p class="no-syn"> The positions <span class="super">superscript</span> and <span class="sub">subscript</span> typeface is turned off here but not the <strong>bold</strong> and <em>oblique</em> typefaces (on browsers that support <code>font-synthesis-position</code>). </p> CSS
@import "https://fonts.googleapis.com/css2?family=Montserrat&display=swap"; * { font-family: "Montserrat", sans-serif; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } .no-syn { font-synthesis-position: none; } Result
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-synthesis-position |
Browser compatibility
Loading…