使用带有 webfont 的特定字形

Question

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

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

Answer 1

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

如果您的 CSS，您可以为每个样式替代添加一个类：

/* 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>

您可能还决定只将样式 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>

如果您想了解有关网络上 OpenType 功能的更多信息，可以查看我的Utility OpenType CSS library，以及the bottom of the documentation“进一步阅读”中的其他资源。