aftertheflood/sparks

一种无需代码即可在文本中创建迷你图的字体。

许可协议

OFL-1.1 license

在此处获取字体文件 here. (.zip file, 5.2MB)

要快速将字体包含在你的网页中，你可能希望使用我们的样式表，该样式表定义了所有字体面，并链接到托管在github上的相关文件。

<link href="https://tools.aftertheflood.com/sparks/styles/font-faces.css" rel="stylesheet" />

在我们的 website 或我们的交互式 notebook 示例中查看它的工作方式：

Sparks GIF

Sparks 使用 OpenType 的 contextual alternates 功能对数字执行简单的替换操作。它在桌面和 Web 上都有效，在 Web 上无需 JavaScript 即可工作，但它确实需要一个现代化的 Web 浏览器，该浏览器可以使用文本中的 OpenType 功能。目前，它与 Microsoft Word（2010 及更高版本）、Apple Pages、Adobe Creative Cloud 应用程序、Chrome 33+、Safari 6+、Firefox 4+ 和 Internet Explorer 10+ 兼容。（有关更完整的浏览器兼容性列表，请参见：http://stateofwebtype.com/）。

目前有三种变体：bars、dots 和 dot-lines（线段之间有小点的折线图），每种变体都有五种粗细变体。

所有三种变体都使用 0-100 的固定比例。如果你的数据仅达到例如 10，则你需要首先将你的数字转换为 100 中的比例，否则你最终会渲染一个特别小的图表。

calt 功能已内置于 OpenType 中，Sparks 仅以非常规的方式利用此功能。它接受诸如 123{30,60,90}456 之类的字符串并输出迷你图。123{30,60,90}456 的示例将具有三个数据点，分别为 30、60 和 90，并由 123 和 456 构成框架。逗号后的空格将阻止数字被转换。括号外的数字永远不会被转换。

使用 Sparks

在 Web 上

将 Sparks 用作 Webfont 时，你可能希望显式启用 calt 功能。上下文连字在大多数现代浏览器中默认启用，但为了支持旧版浏览器，你可以使用以下 CSS（示例来自 Adobe 的 CSS 中的 OpenType 功能语法 页面）：

.yourClass {
 font-variant-ligatures: contextual;
 -moz-font-feature-settings: "calt";
 -webkit-font-feature-settings: "calt";
 font-feature-settings: "calt";
}

有关更多信息，请参见 tests 文件夹中的示例代码。

在 MS Word 中

如果使用 MS Word，则需要启用“使用上下文替代”功能才能绘制迷你图。你可以通过转到“格式 > 字体 > 高级”并启用它来简单地执行此操作。

在 Adobe Illustrator 中

从 OpenType 面板菜单（窗口 > 类型 > OpenType）中打开上下文替换。这是一个 screenshot。

在 Adobe InDesign 中

有时默认情况下会激活上下文替换，有时则不会。我们不知道为什么。使用 OpenType 菜单确保它们已打开，该菜单可以在字符调色板的选项菜单中找到（字符 > 选项 > OpenType > 上下文替换）。这是一个 screenshot。

工作原理：OpenType 代码

在字体文件中，为 bar 和 dot 变体提供替换操作的代码如下所示：

feature calt {
 ignore sub zero' comma space;
 sub braceleft' zero' braceright' by chart.000;
 sub braceleft' zero' comma' by chart.000;
 sub zero' comma' by chart.000;
 sub zero' braceright' by chart.000;
} calt;

而 dot-line 变体的代码稍微复杂一些，看起来有点像这样：

@theDots [ dot.000 dot.001 ... dot.100 ];
@linesTo000 [ line.000.000 line.001.000 ... line.100.000 ];
# 100 more those classes, one for each possible position.
feature calt {
 lookup dotsIgnore {
  ignore sub zero' comma space;
  # ... repeat for all 100 other numbers.
 } dotsIgnore;
 lookup DotsSolo {
  sub braceleft' zero' braceright' by dot.100;
  # ... repeat for all 100 other numbers.
 } dotsSolo;
 lookup dotsInitial {
  sub braceleft' zero' comma' by dot.000;
  # ... repeat for all 100 other numbers.
 } dotsInitial;
 lookup dotsMiddle {
  sub zero' comma' by dot.000;
  # ... repeat for all 100 other numbers.
 } dotsMiddle;
 lookup dotsFinal {
  sub zero' braceright' by dot.000;
  # ... repeat for all 100 other numbers.
 } dotsFinal;
 lookup linesAll {
  sub @theDots' dot.000 by @linesTo000;
  # ... repeat for all 100 other positions.
 } linesAll;
} calt;

从理论上讲，dot-line 变体可以像 bar 和 dot 变体一样，只有一轮字形替换，但是由于 dot-line 字体正在绘制连接而不是单个位置，因此你最终会得到许多行代码（几乎 11k）。这在抽象意义上是很好的，但是事实证明，OpenType 对单个查找表中可以包含多少行代码有限制（大约 3k – 查找表中的所有内容都必须适合 16 位，原因有很多），因此编译失败。当然有很多方法可以解决这个问题，但是这令人头疼。dot-line 版本通过以下方式解决了该问题：

这样做有效，因为 OpenType 替换是一个线性过程，其中每个规则都读取上一个规则的输出，因此你可以链接替换。（So对该语句的许多警告，但这是另一天的故事。有关 OpenType 字形替换有多奇怪的更多信息，请查看 this amazing blogpost.)

关于我们

After the flood 是一家位于伦敦的设计咨询公司。我们与 Google、Nikkei 和 Ford 等全球公司合作，解决业务问题，这些问题将我们对 AI 和数据作为材料的理解与独特的用户洞察力相结合。我们的咨询模式意味着保证可以访问我们的顶级团队。我们的方法以用户为中心且精益，向客户展示进度并与各种专家合作伙伴合作。

许可协议

Sparks 已在 SIL Open Font License 下分发。