colrv1-06.html (1574B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8> 4 <title>COLRv1 font test: radial gradient variations</title> 5 <style> 6 @font-face { 7 font-family: CAhem; 8 src: url("CAhem.ttf"); 9 } 10 p { margin: 0; } 11 span { font: 120px/1 CAhem; } 12 .a { font-variation-settings: "GRX0" 500, "GRR0" 50, "GRX1" 900, "GRR1" 150, "COL1" 0, "COL2" 0.5, "COL3" 1.0; } 13 .b { font-variation-settings: "GRX0" 700, "GRR0" 100, "GRX1" 900, "GRR1" 150, "COL1" -1.0, "COL2" 0.0, "COL3" 1.0; } 14 .c { font-variation-settings: "GRX0" 300, "GRR0" 0, "GRX1" 700, "GRR1" 100, "COL1" 0.5, "COL2" 1.0, "COL3" 1.5; } 15 .d { font-variation-settings: "GRX0" 100, "GRR0" -50, "GRX1" 900, "GRR1" 150, "COL1" 0.5, "COL2" 0.75, "COL3" 1.0; } 16 .e { font-variation-settings: "GRX0" 100, "GRR0" -50, "GRX1" 300, "GRR1" 0, "COL1" -2.0, "COL2" -1.0, "COL3" 0.0; } 17 .f { font-variation-settings: "GRX0" 100, "GRR0" -50, "GRX1" 200, "GRR1" -25, "COL1" -2.0, "COL2" 0.0, "COL3" 2.0; } 18 .g { font-variation-settings: "GRX0" 100, "GRR0" -50, "GRX1" 300, "GRR1" 0, "COL1" -2.0, "COL2" 0.0, "COL3" 0.0; } 19 </style> 20 21 <p>All four lines should show the same set of gradients:</p> 22 <div> 23 <div><span class=a>@#$</div> 24 <div><span class=b>@#$</div> 25 <div><span class=c>@#$</div> 26 <div><span class=d>@#$</div> 27 </div> 28 29 <p>Same again, but the leftmost gradient should be solid blue:</p> 30 <div> 31 <div><span class=e>@#$</div> 32 </div> 33 34 <p>And with the gradients shifted a half-cycle to the right:</p> 35 <div> 36 <div><span class=f>@#$</div> 37 </div> 38 39 <p>Left glyph is solid blue; no blue in the repeating gradients:</p> 40 <div> 41 <div><span class=g>@#$</div> 42 </div>