font-palette-36.html (1166B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>font-palette multiple family-name and @font-palette-values</title> 6 <link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop"> 7 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-palette-values"> 8 <link rel="match" href="font-palette-36-ref.html"> 9 <meta name="assert" content="A single @font-palette-values can be applied to multiple font-families"> 10 <style> 11 @font-face { 12 font-family: "COLR-test-font"; 13 src: url("resources/COLR-palettes-test-font.ttf") format("truetype"); 14 } 15 @font-face { 16 font-family: "foo bar"; 17 src: url("resources/COLR-palettes-test-font.ttf") format("truetype"); 18 } 19 @font-face { 20 font-family: foo; 21 src: url("resources/COLR-palettes-test-font.ttf") format("truetype"); 22 } 23 @font-palette-values --MyPalette { 24 font-family: "COLR-test-font", "foo bar", foo; 25 base-palette: light; 26 } 27 </style> 28 </head> 29 <body> 30 <div style="font: 48px 'COLR-test-font'; font-palette: --MyPalette;">A</div> 31 <div style="font: 48px foo; font-palette: --MyPalette;">A</div> 32 <div style="font: 48px 'foo bar'; font-palette: --MyPalette;">A</div> 33 </body> 34 </html>