企业官网建设流程全解析

• 图形学

Noto Emoji（名称取自"No Tofu"，寓意告别 emoji 缺失时显示的方块占位符）是 Google 出品的开源 emoji 字库，提供符合 Unicode 标准的彩色 emoji 字体、完整的矢量 SVG 与位图 PNG 素材库，以及配套的 emoji 输入元数据。本文以仓库 README.md 为主线，深入剖析 NotoColorEmoji 的 CBDT/CBLC 彩色字体格式与各平台支持现状，结合 Makefile、full_rebuild.sh 与 BUILD.md 等构建工具链源码，讲解从素材整理、PNG 优化到 CBDT 与 COLRv1 字体产出的完整流程，帮助你掌握这款业界标准 emoji 字库的获取、使用、平台适配与自行构建方法。

一、项目概览：Noto Emoji 是什么

按官方定义，Noto Emoji（Stands for No Tofu，即"告别豆腐块"）是一个采用 SIL Open Font License 1.1 的开源 emoji 字库，提供标准 Unicode emoji 支持，并附带一整套配套工具。仓库交付的核心资产包括：

• Unicode 兼容的彩色 emoji 字体：即 2D/fonts/NotoColorEmoji.ttf，是项目对外发布的主字体；
• 完整的 Noto 彩色 emoji 字体文件库：包括矢量 SVG 与多种尺寸的 PNG 位图素材，见 2D/svg 与 2D/png；
• Emoji 输入元数据：包括 shortcode 短码、emoji 排序、ASCII 等价形式等，用于输入法/输入面板的联想与索引。

从目录结构看，仓库按"二维平面（2D）"与"三维渲染（3D）"两条素材线组织：2D/fonts 存放平面版本字体，3D/fonts 则提供 128/192 及手表（watch）等 3D 变体字库；colrv1 目录存放 COLRv1 可变字体的构建配置；tests/basic_test.py 提供了针对字体版本一致性、fsType 与 emojicompat 元数据的自动化校验。

版权提示：主字体（fonts 子目录）遵循 SIL Open Font License, version 1.1；构建工具与大部分图片资源遵循 Apache License, version 2.0；third_party/region-flags 下的旗帜图片属于公有领域或免版权（详见 third_party/region-flags/LICENSE）。

二、彩色字体：NotoColorEmoji 的格式与获取

2.1 最新字体文件与版本获取

README 明确指出，最新的字体文件位于 2D/fonts/NotoColorEmoji.ttf。该文件同时也是 GitHub Pages 发布分支（gh-pages）上构建产物的来源——如果需要下载某个特定历史版本，应前往 gh-pages 分支，那里同时存放了最新版与旧版的内置产物。

当前 2D/fonts 目录实际提供的成品包括：

这些变体的产出与命名规律，从 full_rebuild.sh 的构建脚本中可以得到完整印证（详见"从源码看构建管线"一节）。

2.2 CBDT/CBLC：当前主字体采用的彩色格式

NotoColorEmoji 使用CBDT/CBLC彩色字体格式（CBDT 表内嵌彩色位图数据，CBLC 表提供位图位置索引）。README 明确说明当前项目只构建这一种彩色格式，其他彩色字体格式（如 COLR、sbix、SVG-in-OpenType）目前并不产出。

关于格式支持，README 给出了准确的分平台结论：

• Android与Chrome/Chromium OS原生支持 CBDT/CBLC；
• Windows：自 Windows 10 Anniversary Update 起，在 Chrome 与 Edge 中支持；
• macOS：仅有 Chrome 支持；
• Linux：需要借助 fontconfig 配置调整才能支持（详见项目历史 issue #36）。

这也解释了为什么 COLRv1 变体被单独作为第二梯队推进——COLRv1 采用矢量绘制指令而非位图，文件更小、可缩放，是新一代彩色字体方向（见后文 colrv1/all.toml）。

2.3 单色（Monochrome）字体

除彩色字体外，项目还维护黑白（单色）emoji 字体。README 指出：黑白版本已恢复活跃开发，以**可变字体（variable font）**形式发布。在仓库中，单色字体的字形模板相关逻辑可从 NotoColorEmojiSvg.tmpl.ttx 等 ttx 模板中窥见；而单色字体的独立发布渠道为 Google Fonts 的 Noto Emoji 字体页面。

三、仓库资产速览：SVG、PNG 与旗帜资源

3.1 PNG 素材与尺寸规范

仓库中 2D/png 提供 32/72/128/512 四种像素尺寸的 PNG 位图，其中 128 尺寸（2D/png/128）是 CBDT 字体构建的默认素材源（Makefile 中EMOJI_SRC_DIR ?= png/128）。文件名遵循emoji_uXXXX.svg/emoji_uXXXX_XXXX.png的码点序列命名规范，fe0f（emoji 呈现变体选择符）在序列解析时会被剥离，见 add_glyphs.py 的get_seq_to_file函数。

值得注意的细节：仓库中提供的 PNG 均为构建 NotoColorEmoji 字体实际使用的素材。唯一的例外是旗帜图片——字体中的旗帜是 PNG 图像经过变换处理（尺寸标准化、生成波浪效果与边缘阴影）后的结果，仓库中没有反映这些变换的 SVG 版本。旗帜原始位图存放于 third_party/region-flags/png。

3.2 SVG 素材规范

2D/svg 中的矢量图用于 COLRv1 字体构建，规范要求每个emoji_u*.svg的 viewBox 必须为0 0 128 128。这一约束由 size_check.py 的_check_svg函数强制校验（期望(0.0, 0.0, 128.0, 128.0)），并在full_rebuild.sh的验证阶段于构建前执行。SVG 还需要经过清洗与压缩流程，仓库提供 svg_cleaner.py 与 scour_svg.sh 负责规范化工作。

3.3 旗帜资源与波浪效果

旗帜图片经 waveflag.c（一个基于 cairo 的 C 程序）渲染出波浪形变效果：源码内置top=21、B=21、C=4等网格参数与 8 个控制点mesh_points[]，通过贝塞尔曲线构造波浪轮廓，并按旗帜宽高比进行纵横比自适应。Makefile 中FLAGS_SRC_DIR := third_party/region-flags/png定义了旗帜源目录，./waveflag与 ImageMagick 的convert配合，将原始旗帜统一处理为 136x128 的画布规格（BODY_DIMENSIONS = 136x128）。

四、使用 NotoColorEmoji：平台支持与注意事项

如前所述，NotoColorEmoji 的 CBDT/CBLC 格式在不同平台的可用性差异较大，这是部署与集成时必须先确认的前提。README 提供的平台矩阵可归纳为：

对于 Windows 平台，仓库还专门产出NotoColorEmoji_WindowsCompatible.ttf：由 Makefile 中的NotoColorEmoji_WindowsCompatible.tmpl.ttx目标构建，与标准版的关键差异在于额外执行--add_cmap4 --add_glyf，为 BMP 码点补齐 cmap 格式 4 子表并内嵌 glyf 轮廓，从而提升旧式 Windows 渲染路径的兼容性。

若需在缺少原生支持的平台上渲染，可选方案包括：使用支持 COLRv1 的新版浏览器/渲染器加载 2D/fonts/Noto-COLRv1.ttf，或直接使用各尺寸 PNG 素材自建渲染管线。

五、从源码看构建管线：素材如何变成字体

README 概述了仓库"提供工具"的定位，而完整构建流程沉淀在 BUILD.md、Makefile 与 full_rebuild.sh 中，构成一条可复现的自动化管线。

5.1 构建顺序与阶段划分

BUILD.md 明确指出：通常先构建 CBDT，再构建 COLRv1，因为 COLRv1 构建会从 CBDT 字体中复制部分信息（最典型的是 name 表，见 colrv1_postproc.py 的_copy_names：直接以fonts/NotoColorEmoji.ttf的 name 表覆盖 COLRv1 字体，并补充 nameID 10/11/12 的说明与链接记录）。

一次完整构建（full_rebuild.sh）大致包含以下阶段：

# 1. 校验素材尺寸与 SVG viewBox python size_check.py # 2. 构建 CBDT 字体（并行 48 线程，约 2-3 分钟） rm -rf build/ && time make -j 48 mv *.ttf fonts/ # 3. 生成无旗 CBDT 变体 python drop_flags.py fonts/NotoColorEmoji.ttf # 4. 生成并编译 COLRv1 字体（约 20 分钟） python colrv1_generate_configs.py (cd colrv1 && rm -rf build/ && time nanoemoji *.toml) cp colrv1/build/NotoColorEmoji.ttf fonts/Noto-COLRv1.ttf # 5. COLRv1 后处理 python colrv1_postproc.py # 6. 生成 emojicompat 变体与 flagsonly 变体 emojicompat --op setup --font NotoColorEmoji-emojicompat.ttf hb-subset --unicodes-file=flags-only-unicodes.txt \ --output-file=fonts/NotoColorEmoji-flagsonly.ttf \ fonts/NotoColorEmoji.ttf python update_flag_name.py

5.2 Makefile 中的关键构建步骤

Makefile 定义了主字体与 Windows 兼容字体的精确构建命令，其核心步骤链为：

$(EMOJI).tmpl.ttx: $(EMOJI).tmpl.ttx.tmpl $(ADD_GLYPHS) $(ALL_COMPRESSED_FILES) $(PYTHON) $(ADD_GLYPHS) -f "$<" -o "$@" -d "$(COMPRESSED_DIR)" $(ADD_GLYPHS_FLAGS) $(EMOJI).ttf: check_sequence $(EMOJI).tmpl.ttf $(EMOJI_BUILDER) $(PUA_ADDER) \ $(ALL_COMPRESSED_FILES) | check_tools @$(PYTHON) $(EMOJI_BUILDER) $(SMALL_METRICS) -V $(word 2,$^) "$@" "$(COMPRESSED_DIR)/emoji_u" @$(PYTHON) $(PUA_ADDER) "$@" "$@-with-pua" @$(VS_ADDER) -vs 2640 2642 2695 --dstdir '.' -o "$@-with-pua-varsel" "$@-with-pua" @mv "$@-with-pua-varsel" "$@"

各环节职责如下：

1. 素材标准化：convert将 128px PNG 以-gravity center居中合成到 136x128 透明画布（PNG32输出），统一度量基准；
2. 旗帜加工：waveflag生成波浪形变旗帜，再做同样的画布合成；
3. PNG 量化与压缩：pngquant（参数--speed 1 --skip-if-larger --quality 85-95 --force）完成 8 位调色板量化，zopflipng做无损再压缩（COMPRESSED_DIR为最终素材源）。注意pngquant返回码 98/99 表示"无法改善"，此时直接复用原图；
4. ttx 扩展：add_glyphs.py 读取序列到文件的映射，向 NotoColorEmoji.tmpl.ttx.tmpl 模板追加 cmap、hmtx、GSUB 与 GlyphOrder 表数据，并应用别名文件（-a emoji_aliases.txt，即 emoji_aliases.txt）；Windows 兼容版额外追加--add_cmap4 --add_glyf；
5. 字体组装：emoji_builder.py（third_party/color_emoji/emoji_builder.py，源自 color-emoji 开源工具，BSD 许可）将位图与 ttx 合并为 CBDT 字体，默认携带-S（legacy small metrics 小度量）标志；
6. PUA 映射与变体选择符：map_pua_emoji.py 将私有区（PUA）码点映射到对应 emoji 字形；add_vs_cmap.py（来自 nototools）为 U+2640、U+2642、U+2695 等码点添加变体选择符（VS）cmap 子表（格式 14）；
7. 序列校验：check_sequence目标调用 check_emoji_sequences.py（-n <names> -c）对照 Unicode 属性数据校验每个 emoji 序列的合法性（可设BYPASS_SEQUENCE_CHECK跳过），确保产出通过 Android fontchain linter。

5.3 版本管理与元数据

gen_version.py 与 BUILD.md 共同维护了字体版本字符串规范：Version 2.017;GOOG;noto-emoji:20180810:f1da3bc656f9格式中依次包含版本号、构建方（GOOG）、仓库名、构建日期（YYYYMMDD）与提交哈希（前 12 位）。构建前需手工在 NotoColorEmoji.tmpl.ttx.tmpl 中递增<head>的fontRevision（形如 2.xxx），并同步更新<namerecord nameID="5">中的版本、日期与 commit。该一致性由 tests/basic_test.py 的test_consistent_version通过 fontTools 自动校验：同一目录下所有 ttf 的head.fontRevision与 nameID 5 必须完全一致。

5.4 测试验证体系

tests/basic_test.py 提供了四个自动化测试，构成字体产出的质量底线：

• test_consistent_version：2D/3D 字体版本号全局一致；
• test_consistent_fstype：所有字体的 OS/2 fsType 必须为 0（允许自由嵌入）；
• test_has_emojicompat：*-emojicompat.ttf必须存在且包含带Emji数据的meta表；
• test_flagsonly_name：flagsonly 字体的 Family/FullName/UniqueID/PostScriptName 必须分别为 "Noto Color Emoji Flags" 与 "NotoColorEmojiFlags"。

六、COLRv1 可变字体：新一代彩色格式

6.1 配置结构与可变轴

colrv1/all.toml 与 colrv1/noflags.toml 是 nanoemoji 的构建配置。其结构包含：

• family = "Noto Color Emoji"：字体族名；
• output_file：输出 ttf 文件名；
• color_format = "glyf_colr_1"：声明 COLRv1（基于 glyf 轮廓 + 渐变绘制指令）格式；
• clipbox_quantization = 32：裁剪框量化参数；
• [axis.wght]与[master.regular]：定义 Weight 可变轴（默认 400）与 Regular 字重母版，母版通过srcs列表逐一声明参与构建的 SVG 文件（从 2D/svg 全量收集）。

配置并非手写，而是由 colrv1_generate_configs.py 自动生成：它收集全部 SVG（_NOTO_SVG_DIR.glob("*.svg")）加上 third_party/region-flags/waved-svg 中经过波浪处理的旗帜 SVG（含英格兰/苏格兰/威尔士等细分旗帜），检测二者重名后写入all（全量）与noflags（剔除 U+1F1E6–U+1F1FF 区域指示符）两份配置，因此每次构建前可执行git diff colrv1/*.toml核对变更。

6.2 后处理：补齐 Safari 支持与命名修正

colrv1_postproc.py 负责 nanoemoji 编译后的收尾工作，文档注释明确其目的为"添加额外序列以正确支持 Safari、修正 name 表等"。具体动作包括：

• 从 CBDT 字体复制 name 表并追加 nameID 10/11/12（格式说明与仓库链接）；
• 为 U+2640、U+2642、U+2695 等补加变体选择符 cmap（与 CBDT 构建中的add_vs_cmap对齐）；
• 将旗帜 tag 字符（U+E0030–U+E0039、U+E0061–U+E007A）与取消 tag（U+E007F）映射到空字形，避免缺失字形渲染；
• 调用 colrv1_add_soft_light_to_flags.py 为旗帜叠加柔和光照效果。

七、参与贡献与后续阅读

如果希望为项目贡献力量（新增 emoji、修复旗帜资源、改进构建工具等），请先阅读 CONTRIBUTING.md 了解贡献规范；完整的构建细节与新增旗帜的操作步骤（包括更新third_party/region-flags下的CQ.png/CQ.svg、由 warp 工具产出waved-svg并维护wave_list.txt）参见 BUILD.md。仓库还提供 generate_emoji_html.py、generate_emoji_thumbnails.py、materialize_emoji_images.py 等素材生成与批量渲染脚本，emoji_annotations.txt 则承载了 emoji 的中英文标注数据，可服务于输入法与本地化场景。

通过本文的梳理可以看到：Noto Emoji 不仅是"一套 emoji 图片"，更是一个围绕字体工程设计的完整开源工具链——从 SVG/PNG 素材规范、旗帜波浪渲染、PNG 量化压缩，到 CBDT/COLRv1 双格式字体装配与自动化测试，每个环节都有清晰的源码与配置可循。无论你是想要直接集成彩色 emoji 字体的应用开发者，还是计划基于素材构建自定义 emoji 字库的字体工程师，2D/fonts/NotoColorEmoji.ttf、Makefile 与 BUILD.md 都是值得深入研读的第一手资料。

• 图形学