Nanoemoji – A wee tool to build color fonts

4 months ago 5

A wee tool to build color fonts, including the proposed COLRv1. Relies heavily on Skia via picosvg, as well as resvg to rasterize SVG to PNG for the bitmap color formats.

For example, to build a COLRv1 font with a focus on handwriting do the following in a venv:

pip install -e . nanoemoji --helpfull nanoemoji --color_format glyf_colr_1 $(find ../noto-emoji/svg -name 'emoji_u270d*.svg')

Requires Python 3.8 or greater.

Adding color tables to existing fonts

⚠️ under active development, doubtless full of bugs

Given at least one vector color table (COLR or SVG) the other vector color table and bitmap table(s) can be generated:

# Adds COLR to a font with SVG and vice versa maximum_color my_colr_font.ttf # Adds COLR to a font with SVG and vice versa, and generates a CBDT table maximum_color --bitmaps my_colr_font.ttf

The intended result is a font that will Just Work in any modern browser:

Note that at time of writing Chrome 98+ prefers CBDT to COLR. Same for any environment, such as Android, that relies on Skia, which in turns depends on FreeType to parse color tables (cf. Skia's issue 12945 and FreeType's issue 1142). Also CBDT is huge. So ... maybe take the resulting font and subset it per-browser if at all possible. Wouldn't it be nice if Google Fonts did that for you?

See https://googlefonts.github.io/python#make-a-release.

To help confirm valid output nanoemoji can optionally perform image diffs between browser rendering of the original SVGs and rendering from the compiled font.

Chrome must be installed in the normal location.

Usage:

# Get some svgs to play with git clone --recursive [email protected]:googlefonts/color-fonts.git # Now run nanoemoji, render some hands, and see how we do! # https://rsheeter.github.io/android_fonts/emoji.html?q=u:270b nanoemoji --gen_svg_font_diffs \ $(find color-fonts/font-srcs/noto-emoji/svg -name 'emoji_u270b*.svg')

Read Entire Article