Author: He Wenli, front-end engineer of 360qi Dance Company, and member of W3C CSS Working Group.

Why color fonts

What if you designers want to use the font shown below as a title font for a special event? Make a picture. Then you might run into a couple of problems: if you make an image of one size for different screens, it doesn’t look good when you zoom in or zoom out. Make it SVG directly? It doesn’t seem to be possible to copy the text into Word for bold, that is to say, this makes the text itself lose the ability of real text.

This is where the benefits of color fonts come in. Not only can achieve the requirements of visual effect, but also has the function of conventional text, can be copied, can be pasted, but also can be read by the screen reader, the slightest does not interfere with the routine operation.

Playbox by Matt Lyon

What is a Color Font?

Color fonts for the first time

In the traditional fonts we are familiar with, the font file itself only describes the shape features of the font, which generally contain vector outline data or monochromatic bitmap data. When the browser renders a monochrome font, the rendering engine fills the font area with the font color, and finally draws the corresponding text and its color. In color font, not only the shape features of the font are stored, but also the color information is saved. It can even provide different color matching in the font, which increases the flexibility and provides more abundant shape details.

The most common color font in daily use is Emoji. For example, on Windows 10, the Segoe UI Emoji is a color font.

Typically, color fonts also contain compatibility information, which contains Unicode-encoded monochrome glyphs data, making it possible to render the glyphs of color fonts as if they were normal fonts on platforms that do not support color fonts, achieving a backward compatibility effect.

Color font implementation standards

In the development history of color font design, the standards of color information embedded in OpenType fonts are different due to their own implementation schemes. In the latest OpenType standard, there are up to four descriptive formats for color font data.

  • SVG, the vector font standard led by Adobe and Mozilla. It contains not only standard TrueType or CFF glyph information, but also optional SVG data, allowing you to define colors, gradients, and even animation effects for fonts. Color matching information from the SVG standard will also be stored in CPAL.

  • COLR + CPAL, a vector font standard led by Microsoft. It contains COLR, or glyph layer data, and CPAL color information tables, support for which is integrated in Windows 8.1 and later.

  • CBDT + CBLC, a bitmap font standard led by Google. It contains CBDT color shape bitmap data and CBLC bitmap positioning data, and its support is integrated in Android.

  • SBIX, the bitmap font standard led by Apple. SBIX is a standard bitmap image table that contains PNG, JPEG, or TIFF image information. Support for SBIX is integrated with macOS and iOS.

Browser support for various standards

The browser Support the standard
Microsoft Edge (38+, Win 10) SVG, SBIX, COLR, CBDT
Firefox (26+) SVG, COLR
Safari SBIX, COLR
Chrome CBDT
Internet Explorer (Win 8.1) COLR

Data source www.colorfonts.wtf

With so many standards and spotty browser support, you might be thinking, why bother distributing fonts in different formats depending on UA? Say goodbye!

Wait, Xiaoxia!

In 2016, the major vendors finally agreed to use OpenType SVG as the color font standard, also known as SVG, which is currently the W3C standard. It is believed that the SVG standard used by W3C will be gradually supported by browsers from major manufacturers in the near future.

Current state of font module standards

CSS Fonts Module Level 3 2: Currently in candidate status, it is a standard that has been largely implemented by the major browsers. The latest version of candidate standard was published on June 26th of this year. The Level 3 standard is based on the previous CSS3 Fonts and CSS3 Web Fonts and moves the standards related to Font Loading events into the CSS Font Loading 3 module.

CSS Fonts Module Level 4 4: The next generation standard for Level 3 is currently in working group draft status, the last draft was updated on April 10th. This draft version is based on Level 3, and one of the new features added is that this article will introduce Color Font support.

CSS color font standards

In browsers that support color fonts, rendering works correctly, but you have no control over using the other color schemes built into the font. In The Level 4 standard, there are some new standards for color fonts that we can use better. Let’s take a look.

Select the font palette: Font Palette

As we learned earlier, color fonts can have many different color schemes through CPAL tables. The Font Palette has three built-in parameters and support for custom color palette to modify the color scheme.

  • Normal: The browser renders the font as non-color as possible and chooses a color scheme that is best for reading. The browser may also use the currently set font color when making a decisioncolorAdd to the decision conditions. It is also possible to automatically generate a set of color schemes for rendering that are not built into the font.
  • Light: Some colored fonts indicate in their metadata that a color scheme is suitable for a bright (near-white) background. With this value, the browser will render directly with the first color scheme marked for the feature. If the font file format has no metadata or the corresponding color scheme is not marked in the metadata, then the behavior of this value isnormalThe same.
  • Dark: Just in timelightOn the contrary.
  • Customization: Above we introduced three basic color schemes, so if we want to use other color schemes or to customize, we will use the following@font-palette-valuesHelp.

Example:

h1 {
    font-family: Segoe UI Emojil
    font-palette: light
}
Copy the code

Customize font color: @font-palette-values

The @font-palette-values command is used to define the color rules for the specified font. It allows developers to choose not only the various color schemes built into the font, but also to customize their own color schemes. This rule also allows you to select a custom color scheme from the Font Palette.

Its basic definition rule is @font-palette-values name, where name is the custom name for the color palette rule.

The following are explained by three key attributes.

font-family

First of all, when setting the font color, we need to specify which font the color information is set on. Font-family binds the current color configuration to a font.

@font-palette-values Snow {
    font-family: TriColor;
}
Copy the code

base-palette

When the author makes a color font, there are often many kinds of font color schemes built in. When storing this information, each different color scheme has its own ID, or index. Select from the Base-Palette.

@font-palette-values Snow {
    font-family: TriColor;
    base-palette: 5;
}
Copy the code

color-x

Image credit: Typographics.guru

The figure above shows COLR’s layering of glyphs. COLR divides the parts of the glyph into layers and merges the layers into a complete font in a specific order. Each layer is colored by the color matching information in CPAL. For more powerful customization, the standard uses the color-x attribute to provide the ability to duplicate a particular layer’s color. Where x is the layer ID.

@font-palette-values RedSnow {
    font-family: TriColor;
    base-palette: 5;
    color-1: rgb(255, 0, 0);
}
Copy the code

The above example shows how to duplicate layer colors using color-x. Select the color palette from Base-Palette: 5 and change the color of layer 1 in the color palette to red using color-1: RGB (255, 0, 0).

Level 4 other notable new properties

font-min-size, font-max-size

As described by the attribute name, these two attributes limit the final numeric value of font size. If the calculated value of font size exceeds the set maximum and minimum values, the final value of font size will be directly changed to font min-size or font max-size. This is useful for responsive design, limiting font sizes to a range so that fonts don’t get too big or too small.

conclusion

Fonts Module Level 4 has a lot of interesting new features, but we’ll see how they work and how the standards improve as browsers start to support them.

Text links in

  1. https://docs.microsoft.com/en-us/typography/opentype/spec/otff
  2. https://www.w3.org/TR/2018/CR-css-fonts-3-20180626/
  3. https://www.w3.org/TR/css-font-loading/
  4. https://www.w3.org/TR/css-fonts-4/

The resources

  • https://www.w3.org/TR/css-fonts-4/
  • https://docs.microsoft.com/en-us/typography/opentype/spec/
  • Typography. The guru/journal/win…
  • https://www.colorfonts.wtf/

Thank you

Thanks to Teacher Li Songfeng, Gao Feng, Liu Guanyu and An Jia for their suggestions on revising this article.