使用带有 webfont 的特定字形

Question

使用 webfont，我想使用CSS 中的font-feature-settings:选项以及HTML 中的span 类，以便使用字体集中的特定替代字形。

我需要以正确的语法使用哪些值（GID、Unicode？）才能glyph在glyph替代方案中定位特定值？

Answer 1

这些功能使用 OpenType Stylistic Alternates (salt)。从 Illustrator 中的字形面板中，我们看到这是 Stylistic Alt number 4（当然，如果没有额外的上下文，这意味着什么并不十分清楚）。

如果你的 CSS，你可以为每个 Stylistic Alternate 添加一个类：

/* OpenType Stylistic Alternates */
.salt,
.salt-1 { font-feature-settings: "salt"; }
.salt-2 { font-feature-settings: "salt" 2; }
.salt-3 { font-feature-settings: "salt" 3; }
.salt-4 { font-feature-settings: "salt" 4; }

然后，在您的 HTML 中：

<h1>
  <span class="salt">C</span>offee
</h1>

并使用特定数字：

<h1>
  <span class="salt-4">C</span>offee
</h1>

您也可能决定只将 Stylistic Alt 应用于整个单词，但这可能会产生不同的结果，具体取决于字体：

<!-- Apply the OpenType feature to specific letters -->

<div>
  <span class="salt-1">C</span>offee
</div>

<div>
  <span class="salt-2">C</span>offee
</div>

<div>
  <span class="salt-3">C</span>offee
</div>

<div>
  <span class="salt-4">C</span>offee
</div>

<!-- Apply the OpenType feature to whole words -->

<div class="salt-1">
  Coffee
</div>

<div class="salt-2">
  Coffee
</div>

<div class="salt-3">
  Coffee
</div>

<div class="salt-4">
  Coffee
</div>

如果您想了解有关 Web 上 OpenType 功能的更多信息，可以查看我的Utility OpenType CSS 库，以及文档底部“进一步阅读”中的其他资源。