OTF 字体的动画位图 (APNG)答案

【问题标题】：Animated bitmaps (APNG) in OTF fontsOTF 字体的动画位图 (APNG)
【发布时间】：2017-01-05 15:25:15
【问题描述】：

Microsoft/Mozilla 的 COLR/CPAL 表使用标准 Truetype glyf 或 Postscript CFF 轮廓。
Mozilla’s/Adobe’s/W3C’s SVG 表格使用SVG 轮廓和CSS 变量。
Google’s CBDT/CBLC 表格使用嵌入的 PNG 位图。
Apple’s sbix 表使用嵌入的 PNG、JPEG 或 TIFF 位图（以及标准之外的 PDF）。 Support for masks and aliases 正在计划中。

SVG 表明确考虑了动画——使用 CSS、JS、SMIL 或嵌入文件——但我不确定它是否已在任何地方实现：

Glyph Rendering

SVG 字形描述可以静态呈现或启用动画。

是否有任何基于PNG 的实现支持使用APNG 的动画？工具呢？

Compressed Color Bitmaps

每个单独字形的图像都存储为纯 PNG 数据。此类 PNG 数据中仅允许以下块：IHDR、PLTE、tRNS、sRGB、IDAT 和 IEND。如果存在其他块，则行为未定义。

JFTR, APNG 依赖于 OS X / macOS 和 iOS 原生支持的三个附加块：

所以，如果我没记错的话，APNG 应该在 sbix 中逐字使用，而不是在 CBDT 中。

【问题讨论】：

SVG 表格方法肯定已经上线，尽管（像所有重要的 OpenType 更新一样）它需要做很多工作。 Firefox 目前拥有最广泛的支持 - 请参阅 pixelambacht.nl/lapislegit 字体以获取 nstance。

【解决方案1】：

Firefox and Safari only 似乎支持 APNG，因此在用作字体字形时也是如此。

我认为您已经考虑过这一点，但如果 GIF 就足够了，那么您最好的选择是 OpenType SVG。它具有最广泛的支持，您可以在 SVG 中嵌入位图图像：请参阅this test font 中的字形 0050。

关于 OpenType SVG 中的非位图动画，很遗憾您不能使用 JavaScript 动画，并且在 SMIL 即将淘汰时，您会被 CSS 动画困住......目前在 Firefox 和 Edge 中无法使用 ?

【讨论】：

我没有认真考虑过 GIFinSVGinOTF（也不是 PNGinSVGinOTF）。据我所知，目前只有 Firefox 完全支持 SVGinOTF。其他平台仅支持基本的单色轮廓，如果有的话。 Opera 在切换到 Blink 之前确实支持 APNG，它的 working patch 仍在等待批准，因此它可能会回到 Opera 并最终“很快”到达 Chrome（如果没有政治支持 WebM/P）。跨度>
Windows 10 最近也添加了支持，因此 OpenType SVG 可以在 Edge 中使用。我希望 Chrome 能很快跟进！
@RoelN Chrome 在此处有一个开放的彩色字体支持元问题：bugs.chromium.org/p/chromium/issues/detail?id=703332