将特定字形与Webfont一起使用

Question

使用Web字体，我想在CSS中使用 font-feature-settings： 选项以及 span类 ，以便使用字体集中的特定备用字形。

我需要使用哪些值（GID，Unicode？）以在glyph替代方案中定位特定的glyph？

Answer 1

这些功能使用OpenType风格替代项（盐）。从Illustrator的字形面板中，我们可以看到这是Stylistic Alt number 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>

您可能还决定只对整个单词应用样式替换，但这可能会因字体而异：

<!-- 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 library的“进一步阅读”中查看我的the bottom of the documentation和其他资源。