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

Question

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

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

Answer 1

这些功能使用 OpenType Stylistic Alternates (salt)。从 Illustrator 的字形面板中，我们看到这是 Stylistic Alt 数字 4（当然，如果没有额外的上下文，它的含义不是很清楚）。

如果您的 CSS，您可以为每个文体替代添加一个 class：

/* 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, and other resources on the “further reading” at the bottom of the documentation。

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

Using a specific glyph with a webfont

html

css

fonts

webfonts