fonts - 字体可以在 TTF 中指定强制背景色吗？

Question

我正在尝试研究创建我自己的自定义字体。我读了一些书，但由于我对字体一无所知，所以我有一个问题无法找到答案。

你能定义一种字体颜色是静态的吗？例如，我想创建一种字体，其中每个 A 都有蓝色背景，B 有黄色背景等。我所做的阅读似乎表明您需要将字体转换为黑色或白色。我的理解是否正确，不支持在字体中强制使用特定颜色，尤其是背景颜色？

Answer 1

支持取决于您的操作系统/浏览器版本，但 OpenType 1.7 支持多色字体，并且有多个选项。

• COLR/CPAL 表:这是一种多层可缩放矢量方法，其中单个字形可以具有多个颜色层，类似于早期使用多个单独字体的多层字体方法。轮廓是标准的“glyf”表格轮廓，如单色字体。 Windows 8.1 和 FireFox 40.0.3 上的 IE 支持它(试试 Segoe UI Emoji)。 http://www.microsoft.com/typography/otspec/colr.htm https://www.microsoft.com/typography/otspec/cpal.htm *请注意，我实际上对这个提案做了一些工作，所以这是我最了解的一个。
• OpenType 中的 SVG:这也是一种可扩展的矢量方法，将 SVG 轮廓存储在 OpenType 容器中。它在 FireFox 26 上受支持。http://lists.w3.org/Archives/Public/public-svgopentype/2013Jul/0003.html
• CBDT/CBLC 表:这存储了彩色嵌入位图，类似于只有单色的旧 EBDT 表。 http://www.microsoft.com/typography/otspec/cblc.htm http://www.microsoft.com/typography/otspec/cbdt.htm
• SBIX:它在 TrueType 中存储图像 (PNG/JPG/TIFF)，支持 iOS4+ 和 OSX 10.7+。 https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6sbix.html .

前两个具有不受设备影响的可扩展性优势，但它们缺乏精细的像素级细节。后两者的优点是可以在图像中提供精细的细节，但是当以非预期尺寸使用时，它们看起来像素化或模糊。

Roel Nieskens 在这里写了一篇不错的文章，其中包括一个测试页面，显示您当前的浏览器对不同方法的支持:http://pixelambacht.nl/2014/multicolor-fonts/

OpenType 1.6 规范不直接支持多色字体，但您仍有选择...

• 创建所有字形的图集纹理(基本上是与 CSS Sprite 结合使用的大位图)。游戏使用这种方法，但需要注意的是它们不可扩展 - 无论如何也不是没有像素化。
• 叠加多种 OpenType 字体的文本。多层 OpenType 是图形设计师使用的一种方法(例如在 In-Design 中)。创建多种字体有点奇怪，每种颜色一种，但它确实有效。您可以将 float 跨度彼此半透明地叠加。
• 通过 InkScape 使用 SVG 字体(在支持它的浏览器子集中)。 SVG 字体可缩放并支持多种颜色(实际上几乎支持 SVG 所做的任何事情)，但它们的支持有限:Opera 9+ 或 Chrome 4+，但不支持 IE10 或 FF。
• 直接使用 SVG 组件。它不是真正的“SVG 字体”，但您仍然可以通过编程将每个字符与其相应的 SVG 部分相关联(假设我们在 ASCII 范围内，而不是整个 Unicode 中的任何字符)。当前所有浏览器都支持 SVG:Opera9、IE10、FF3、Chrome4、Safari3.2。