Color Fonts
CSS Fonts Level 4 introduces support for color fonts. The idea is that these fonts will be less resource-intensive because they will make fewer round trips to the server to manipulate the colors available to display the font.
In theory (there are no browsers that currently support this) defining a custom palette for color fonts look like this:
- The
@font-paletter-valuesat-rule - The name of the palette we are creating
- The font family that the palette is associated with
- The base palette that we're overriding
- A list of one or more override colors
@font-palette-values Cooler {
font-family: Bradley;
base-palette: 1;
override-colors:
1 rgb(126,183,228);
}Once the palette is defined, we can use it as another attribute for CSS rules:
h1 {
font-family: Bradley;
font-palette: Cooler;
font-size: 10em;
}The code means that all h1 elements will use the color font and the customized palette. We can use other fonts as we normally would.
Browser support #
Spotty, at best. There is no current browser that supports @font-palette-values or the font-palette attribute.
Status per browser:
- Safari doesn't take the font color into consideration at all
- Turns the font into a black and white affair that looks good but it's not what I wanted
- I would have expected the browser to at least render the colors in the font
- Chrome ignores the @font-palete at-rule and the font-palette attribute altogether
- It honors the colors as stored in the font
- Firefox doesn't support color fonts at all
- The font I tested with renders as white letters in black background