italic-oblique-fallback.html (2274B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 4 <title>CSS Fonts testcase: oblique/italic fallback</title> 5 6 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-style-matching"> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9389#issuecomment-2625314278"> 8 <meta name="assert" content="request for 'oblique' style should not fall back to a face labelled 'italic'"> 9 <link rel="match" href="italic-oblique-fallback-ref.html"> 10 11 <style> 12 /* font-family test1 has 'normal' and 'oblique' (reduced-size) faces */ 13 @font-face { 14 font-family: test1; 15 font-style: normal; 16 src: url("resources/markA.ttf"); 17 } 18 @font-face { 19 font-family: test1; 20 font-style: oblique; 21 src: url("resources/markA.ttf"); 22 size-adjust: 50%; 23 } 24 25 /* font-family test2 has 'normal' and 'italic' (reduced-size) faces */ 26 @font-face { 27 font-family: test2; 28 font-style: normal; 29 src: url("resources/markA.ttf"); 30 } 31 @font-face { 32 font-family: test2; 33 font-style: italic; 34 src: url("resources/markA.ttf"); 35 size-adjust: 50%; 36 } 37 38 /* font-family test3 has only an 'italic' face */ 39 @font-face { 40 font-family: test3; 41 font-style: italic; 42 src: url("resources/markA.ttf"); 43 } 44 45 div { 46 font-size: 50px; 47 font-synthesis: none; 48 } 49 50 .test1 { 51 font-family: test1, serif; 52 } 53 54 .test2 { 55 font-family: test2, serif; 56 } 57 58 .test3 { 59 font-family: test3, serif; 60 } 61 </style> 62 63 <!-- (1) font family with 'normal' and 'oblique' faces --> 64 <!-- the span uses the 'oblique' face --> 65 <div class="test1">A<span style="font-style:oblique">A</span></div> 66 <!-- the span requests 'italic', will fall back to the 'oblique' face --> 67 <div class="test1">A<span style="font-style:italic">A</span></div> 68 69 <br> 70 71 <!-- (2) font family with 'normal' and 'italic' faces --> 72 <!-- the span uses the 'italic' face --> 73 <div class="test2">A<span style="font-style:italic">A</span></div> 74 <!-- the span requests 'oblique', should NOT fall back to the 'italic' face --> 75 <div class="test2">A<span style="font-style:oblique">A</span></div> 76 77 <br> 78 79 <!-- (3) font family with only an 'italic' face --> 80 <!-- the ONLY face in the family is 'italic', so it will be used throughout --> 81 <div class="test3">A<span style="font-style:italic">A</span></div> 82 <div class="test3">A<span style="font-style:oblique">A</span></div>