font-descriptor-range-reversed.html (1645B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>CSS Test: Matching @font-face font-weight, font-style, and font-stretch descriptors with reversed ranges</title> 4 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-prop-desc"> 5 <link rel="match" href="font-descriptor-range-reversed-ref.html"> 6 7 <!-- Using csstest-weights-{100,900}-kerned.ttf just as two convenient 8 different fonts here with different "A" glyphs --> 9 10 <style> 11 @font-face { 12 font-family: TestWeight; 13 src: url(resources/csstest-weights-100-kerned.ttf); 14 font-weight: 300 200; 15 } 16 @font-face { 17 font-family: TestWeight; 18 src: url(resources/csstest-weights-900-kerned.ttf); 19 font-weight: 300 400; 20 } 21 @font-face { 22 font-family: TestStyle; 23 src: url(resources/csstest-weights-100-kerned.ttf); 24 font-style: oblique 30deg 20deg; 25 } 26 @font-face { 27 font-family: TestStyle; 28 src: url(resources/csstest-weights-900-kerned.ttf); 29 font-style: oblique 30deg 40deg; 30 } 31 @font-face { 32 font-family: TestStretch; 33 src: url(resources/csstest-weights-100-kerned.ttf); 34 font-stretch: 120% 110%; 35 } 36 @font-face { 37 font-family: TestStretch; 38 src: url(resources/csstest-weights-900-kerned.ttf); 39 font-stretch: 120% 130%; 40 } 41 </style> 42 43 <!-- Matches `font-weight: 300 200;` --> 44 <p style="font-family: TestWeight; font-weight: 250;">A</p> 45 46 <!-- Matches `font-style: oblique 30deg 20deg;` --> 47 <p style="font-family: TestStyle; font-style: oblique 25deg;">A</p> 48 49 <!-- Matches `font-style: oblique 120% 110%;` --> 50 <p style="font-family: TestStretch; font-stretch: 115%;">A</p> 51 52 <script> 53 document.fonts.ready.then(function() { 54 document.documentElement.className = ""; 55 }); 56 </script>