New ways to play with CSS fonts: implementation of colored fonts

What if you designers want to use the font below as the title font in some special events? Make it into a picture. Then you may encounter the following problems: adaptation to different screens. If you only make pictures of one size, the effect will not be very good after zooming in or out. Directly into SVG? It seems that it is impossible to copy it into Word and make it bold. In other words, this method makes the "text" itself lose the ability that real text should have.

This is where the benefits of colored fonts come into play. It not only meets the requirements of visual effects, but also has the functions of regular text. It can be copied, pasted, and read by screen readers without interfering with regular operations.

Playbox by Matt Lyon

What is Color Font?

First Look at Color Fonts

In the traditional fonts we are familiar with, the font file itself only describes the font's appearance features, which generally include vector outline data or monochrome bitmap data. When a browser renders a monochrome font, the rendering engine fills the glyph area with the set font color and finally draws the corresponding text and its set color. Color fonts not only store the font's appearance features, but also the color information, and can even provide different color schemes in the font, which increases flexibility and provides richer appearance details.

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

Usually color fonts also contain some compatibility information, which includes Unicode-encoded monochrome glyph data, so that on some platforms that do not support color fonts, the glyphs of color fonts can still be rendered like ordinary fonts, achieving a backward compatibility effect.

Implementation standards for color fonts

In the history of color font design, each company has its own implementation plan, resulting in different standards for color information embedded in OpenType fonts. In the latest OpenType standard, there are up to four description formats for color font data.

1. SVG is a vector font standard developed by Adobe and Mozilla. It contains not only the standard TrueType or CFF glyph information, but also optional SVG data, allowing the definition of colors, gradients and even animation effects for the font. The color information in the SVG standard will also be stored in CPAL.
2. COLR + CPAL, vector font standards led by Microsoft. It contains COLR, i.e. glyph layer data , and CPAL, a color information table , support for which is integrated into Windows 8.1 and later versions.
3. CBDT + CBLC, a bitmap font standard led by Google. It contains CBDT color outline bitmap data and CBLC bitmap positioning data , and support for them is integrated in Android.
4. SBIX, a bitmap font standard led by Apple. SBIX, or Standard Bitmap Image List , contains image information for PNG, JPEG, or TIFF, and support for it is integrated into macOS and iOS.

Browser support for various standards

Data source: www.colorfonts.wtf

Seeing so many standards and uneven browser support, you may wonder if we need to distribute fonts in different formats according to UA for compatibility? Goodbye!

Wait a minute, young man!

In 2016, major manufacturers finally agreed to use OpenType SVG as the standard for color fonts, which is the SVG mentioned above, and is also the standard currently used by W3C . I believe that in the near future browsers from all major manufacturers will gradually support the SVG standard used by W3C.

Current status of font module standards

CSS Fonts Module Level 3: Currently in the candidate recommendation state, it is a standard that has been largely implemented by mainstream browsers. The latest version of the candidate standard was published on June 26 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 module.

CSS Fonts Module Level 4: The next generation standard of Level 3, currently in the working group draft state, the latest draft was updated on April 10. This draft version is based on Level 3, and the new attributes added include support for color fonts, which will be introduced in this article.

CSS Color Fonts

In browsers that support color fonts, they will render correctly, but you will not be able to control the use of other colors built into the font. In the Level 4 standard, some new standards related to color fonts have been added to enable us to use them better. Let’s take a look at it next.

Choose font color: font-palette

We have learned earlier that color fonts can have a variety of different color schemes through the CPAL table. font-palette has three built-in parameters and supports custom colors to achieve the effect of modifying the color scheme.

1. normal: The browser renders the font as a non-color font as much as possible and chooses a color scheme that is most suitable for reading. The browser may also add the currently set font color to the decision-making conditions when making the decision. It is also possible to automatically generate a set of color schemes for rendering that are not built into the font.
2. light: Some colored fonts indicate in their metadata that a certain color scheme is suitable for use on light (close to white) backgrounds. With this value, the browser will simply render using the first color scheme that has this feature marked. If the font file format has no metadata or the corresponding color scheme is not marked in the metadata, then the value behaves the same as normal.
3. dark: just the opposite of light.
4. Customization: We introduced three basic color options above. If you want to use other color schemes or customize them, we will use the help of @font-palette-values ​​introduced next.

Example:

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

Custom font color: @font-palette-values

@font-palette-values ​​is used to define the color matching rules for the specified font. It allows developers to not only freely choose various color schemes built into the font, but also customize color schemes. font-palette selection of a custom color scheme is also set through this rule.

Its basic definition rule is @font-palette-values name , name is the custom name of this color matching rule.

The following is an explanation of three key attributes.

font-family

First of all, when setting the color scheme for a font, we must first specify which font the color scheme information is set on. The current color configuration can be bound to a font through font-family .

@font-palette-values ​​Snow {
    font-family: TriColor;
}

base-palette

When authors create colored fonts, they often build in a variety of font color schemes. When storing this information, each different color scheme has its own corresponding id , or index . Use base-palette to make your selection.

@font-palette-values ​​Snow {
    font-family: TriColor;
    base-palette: 5;
}

color-x

Image credit: typography.guru

The image above shows how COLR layers glyphs. COLR separates the parts of a glyph into layers and merges the layers into a complete font in a specific order. Each layer is colored using the color information in CPAL. In order to achieve more powerful customization effects, color-x attribute is used in the standard to provide the ability to copy the color of a specific layer. The x is the layer id .

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

The above example shows how to copy the layer color through color-x . Select the built-in color scheme through base-palette: 5 , and change the color of the layer with id 1 in the color scheme to red through color-1: rgb(255, 0, 0) .

Other notable new attributes of Level 4

font-min-size, font-max-size

As the property names suggest, these two properties will constrain the final 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 modified to font-min-size or font-max-size . This is useful for responsive design, limiting the font size to a range so that the font does not become too large or too small.

Summarize

There are quite a lot of interesting new features in Fonts Module Level 4. The specific effects and standard improvements can only be known after major browsers begin to support it. Let us wait and see.

Links in this article

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

References

https://www.w3.org/TR/css-fonts-4/
https://docs.microsoft.com/en-us/typography/opentype/spec/
https://typography.guru/journal/windows-color-fonts/
https://www.colorfonts.wtf/

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.