colrv1-06-ref.html (1291B)
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 .e1 { font-variation-settings: "GRX0" 700, "GRR0" 100, "GRX1" 1000, "GRR1" 175, "COL1" 2.0, "COL2" 2.0, "COL3" 1.99; } 14 .f { font-variation-settings: "GRX0" 500, "GRR0" 50, "GRX1" 900, "GRR1" 150, "COL1" 0.5, "COL2" 1.0, "COL3" 1.5; } 15 .g { font-variation-settings: "GRX0" 500, "GRR0" 50, "GRX1" 900, "GRR1" 150, "COL1" 0, "COL2" 1.0, "COL3" 1.0; } 16 </style> 17 18 <p>All four lines should show the same set of gradients:</p> 19 <div> 20 <div><span class=a>@#$</div> 21 <div><span class=a>@#$</div> 22 <div><span class=a>@#$</div> 23 <div><span class=a>@#$</div> 24 </div> 25 26 <p>Same again, but the leftmost gradient should be solid blue:</p> 27 <div> 28 <div><span class=a><span class=e1>@</span>#$</div> 29 </div> 30 31 <p>And with the gradients shifted a half-cycle to the right:</p> 32 <div> 33 <div><span class=f><span class=e1>@</span>#$</div> 34 </div> 35 36 <p>Left glyph is solid blue; no blue in the repeating gradients:</p> 37 <div> 38 <div><span class=g><span class=e1>@</span>#$</div> 39 </div>