Использование определенного глифа с веб-шрифтом - PullRequest
Новая
       16

Использование определенного глифа с веб-шрифтом

0 голосов
/ 03 марта 2019

Используя веб-шрифт, я хотел бы использовать font-feature-settings: в CSS вместе с классом span в HTML, чтобы использовать определенный альтернативный глиф из набора шрифтов.

Какие значения (GID, Unicode?) мне нужно использовать в правильном синтаксисе, чтобы указывать на конкретный glyph в пределах glyph альтернативы?

enter image description here

1 Ответ

0 голосов
/ 05 марта 2019

Эти функции используют OpenType Stylistic Alternates (соль).На панели глифов в Illustrator показано, что это Stylistic Alt номер 4 (предоставлено, не очень понятно, что это значит без дополнительного контекста).

Если ваш CSS, вы можете добавить класс для каждого StylisticАльтернатива: 

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

enter image description here

Вы также можете просто применить 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 в Интернете, вы можете ознакомиться с моей утилитой OpenType CSS-библиотеки и другими ресурсами в разделе «Дальнейшее чтение» в внизу документации .

...