anthrotype
commented
2 years ago Actually, it turns out that OT-SVG font with CSS color variables like "var(--color0, ...)" and a CPAL table does not seem to be working in Safari either, which is the only one I was hoping that it'd work. We already know that FireFox does not support font-palette and @font-palette-values yet: https://bugzilla.mozilla.org/show_bug.cgi?id=1461588.
Here's two test Bungee Color fonts, one is a COLRv0 font, the other is an OT-SVG font, with fill attributes using the CSS custom property notation (var(--color0, ...)). Both fonts contain the same CPAL table with two color palettes; they are both subsetted to A, B, C, and space characters. There's a test html page that set up @font-palette-values and font-palette properties to either select the second non-default palette or override one specific color.
It works in Safari when using the COLRv0 font (I can see the colors changing from the default red to blue), whereas it does not work with the OT-SVG font (Bungee stays red) :(
BungeeColorSVG-multiple-palettes.zip
/cc @Litherum
litherum
rsheeter
In addition to the inlined SVG colors (constant names "yellow" or hex #ABCDEF) which we do support, and the special
currentColorkeyword, which we don't yet (cf. #405), OT-SVG table also allows to define color variables (viaCSS var()function) that reference color palettes defined in the CPAL table, thus allowing to change the colors by selecting among multiple color palettes (e.g. light vs dark, etc.).We need to support this both ways: 1) in maximum_color when converting OT-SVG => COLR, and 2) when converting a COLR font with multiple CPAL palettes to OT-SVG (#421).