字体可以在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:这也是一种可伸缩的矢量方法,在OpenType容器中存储SVG轮廓.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:这将图像(PNG/JPG/TIFF)存储在TrueType中,在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精灵一起使用的大型位图).游戏使用这种方法,但需要注意的是它们不具有可扩展性 - 无论如何都不是没有像素化.
• 覆盖多个OpenType字体的文本.多层OpenType是图形设计人员使用的方法(例如在In-Design中).创建多种字体有点奇怪,每种颜色一种,但它有效.您可以将浮动的跨度半透明地叠加在一起.
• 通过InkScape使用SVG字体(在支持它的浏览器子集中).SVG字体是可扩展的并且支持多种颜色(实际上几乎是SVG所做的任何事情),但它们的支持有限:Opera 9+或Chrome 4+,但不支持IE10或FF.
• 直接使用SVG组件.它不是真正的"SVG字体",但您仍然可以通过编程方式将每个字符与其对应的SVG部分相关联(假设我们处于ASCII范围内,而不是整个Unicode中的任何字符).目前所有浏览器都支持SVG:Opera9,IE10,FF3,Chrome4,Safari3.2.