html - 将特定字形与网络字体一起使用

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>

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

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