css(update): add oblique-only value to the font-synthesis-style page

files/en-us/web/css/font-synthesis-style/index.md

@@ -17,6 +17,7 @@ It is often convenient to use the shorthand property {{cssxref("font-synthesis")
 /* Keyword values */
 font-synthesis-style: auto;
 font-synthesis-style: none;
+font-synthesis-style: oblique-only;
 
 /* Global values */
 font-synthesis-style: inherit;
@@ -31,7 +32,9 @@ font-synthesis-style: unset;
 - `auto`
   - : Indicates that the missing oblique typeface may be synthesized by the browser if needed.
 - `none`
-  - : Indicates that the synthesis of the missing oblique typeface by the browser is not allowed.
+  - : Indicates that the synthesis of the missing oblique typeface by the browser is _not_ allowed.
+- `oblique-only`
+  - : Same as `auto` value, but when italics is requested, using `font-style: italic`, the synthesis doesn't happen.
 
 ## Formal definition
 
@@ -69,6 +72,7 @@ This example shows turning off synthesis of the oblique typeface by the browser
 .english {
   font-family: "Montserrat", sans-serif;
 }
+
 .no-syn {
   font-synthesis-style: none;
 }
@@ -78,6 +82,100 @@ This example shows turning off synthesis of the oblique typeface by the browser
 
 {{EmbedLiveSample('Disabling synthesis of bold typeface', '', '100')}}
 
+### Comparison of font-synthesis-style values
+
+This example compares all the `font-synthesis-style` values using italic and oblique styled texts.
+
+#### HTML
+
+```html
+<fieldset class="fss-none">
+  <legend>font-synthesis-style: none</legend>
+  <p class="oblique">Oblique text</p>
+  <p class="italic">Italics text</p>
+</fieldset>
+<br />
+
+<fieldset class="fss-oblique">
+  <legend>font-synthesis-style: oblique</legend>
+  <p class="oblique">Oblique text</p>
+  <p class="italic">Italics text</p>
+</fieldset>
+<br />
+
+<fieldset class="fss-oblique-only">
+  <legend>font-synthesis-style: oblique-only</legend>
+  <p class="oblique">Oblique text</p>
+  <p class="italic">Italics text</p>
+</fieldset>
+```
+
+#### CSS
+
+```css hidden
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
+
+p {
+  font-family: "Montserrat", sans-serif;
+  font-size: 1.2rem;
+}
+
+@supports not (font-synthesis-style: oblique-only) {
+  body::before {
+    content: "Your browser doesn't support the 'oblique-only' value.";
+    background-color: wheat;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  body > * {
+    display: none;
+  }
+}
+```
+
+```css
+/* Specify style of the font synthesis */
+.fss-none {
+  font-synthesis-style: none;
+}
+
+.fss-oblique {
+  font-synthesis-style: oblique;
+}
+
+.fss-oblique-only {
+  font-synthesis-style: oblique-only;
+}
+
+/* Set font styles */
+.oblique {
+  font-style: oblique;
+}
+
+.italic {
+  font-style: italic;
+}
+
+/* Styles for the demonstration */
+.oblique::after {
+  content: " (font-style: oblique)";
+  font-size: 0.8rem;
+  vertical-align: sub;
+}
+
+.italic::after {
+  content: " (font-style: italic)";
+  font-size: 0.8rem;
+  vertical-align: sub;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample('Disabling synthesis of bold typeface', '', '560')}}
+
 ## Specifications
 
 {{Specifications}}