font-synthesis-style-oblique-only.html (1290B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 4 <title>CSS font-synthesis-style:oblique-only test</title> 5 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-synthesis-style"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9390#issuecomment-2625297188"> 7 <meta name="assert" content="font-synthesis-style: oblique-only blocks italic-to-oblique fallback"> 8 9 <link rel="match" href="font-synthesis-style-oblique-only-ref.html"> 10 11 <style> 12 @font-face { 13 font-family: test; 14 font-style: normal; 15 src: url("resources/markA.ttf"); 16 } 17 @font-face { 18 font-family: test; 19 font-style: oblique; 20 src: url("resources/markB.ttf"); 21 } 22 div { 23 font: 50px test; 24 } 25 </style> 26 27 <!-- normal: this should use markA --> 28 <div style="font-style: normal">A</div> 29 30 <!-- oblique: should use markB --> 31 <div style="font-style: oblique">B</div> 32 33 <!-- italic: should use markB (oblique) as fallback for italic --> 34 <div style="font-style: italic">B</div> 35 36 <!-- italic with synthesis:none: should use markB, as oblique fallback (not synthesis!) is allowed --> 37 <div style="font-style: italic; font-synthesis-style: none">B</div> 38 39 <!-- italic with synthesis:oblique-only: should use markA, as oblique fallback is disabled --> 40 <div style="font-style: italic; font-synthesis-style: oblique-only">A</div>