colrv1-08.html (1226B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8> 4 <title>COLRv1 font test: linear gradient with degenerate color line</title> 5 <style> 6 @font-face { 7 font-family: CAhem; 8 src: url("CAhem.ttf"); 9 } 10 span { font: 50px/1 CAhem; } 11 div:nth-child(1) span { font-variation-settings: "COL1" -2.0, "COL2" -2.0, "COL3" -2.0; } 12 div:nth-child(2) span { font-variation-settings: "COL1" -1.5, "COL2" -1.5, "COL3" -1.5; } 13 div:nth-child(3) span { font-variation-settings: "COL1" -1.0, "COL2" -1.0, "COL3" -1.0; } 14 div:nth-child(4) span { font-variation-settings: "COL1" -0.5, "COL2" -0.5, "COL3" -0.5; } 15 div:nth-child(5) span { font-variation-settings: "COL1" 0.0, "COL2" 0.0, "COL3" 0.0; } 16 div:nth-child(6) span { font-variation-settings: "COL1" 0.5, "COL2" 0.5, "COL3" 0.5; } 17 div:nth-child(7) span { font-variation-settings: "COL1" 1.0, "COL2" 1.0, "COL3" 1.0; } 18 div:nth-child(8) span { font-variation-settings: "COL1" 1.5, "COL2" 1.5, "COL3" 1.5; } 19 div:nth-child(9) span { font-variation-settings: "COL1" 2.0, "COL2" 2.0, "COL3" 2.0; } 20 </style> 21 22 <div> 23 <div><span>!</div> 24 <div><span>!</div> 25 <div><span>!</div> 26 <div><span>!</div> 27 <div><span>!</div> 28 <div><span>!</div> 29 <div><span>!</div> 30 <div><span>!</div> 31 <div><span>!</div> 32 </div>