font-variant-alternates — альтернативні гліфи шрифту
автор: Svitlana
Загальний опис
автор: NagarD
Синтаксис
font-variant-alternates: normal | [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ]Властивість font-variant-alternates може отримувати 8 значень:
-
normal -
Жодна з перерахованих нижче функцій не ввімкнена.
автор: Svitlana -
stylistic(<feature-value-name>) -
Дозволяє відображати стилістичні альтернативи (специфікація шрифту, функція OpenType:
автор: Svitlanasalt <feature-index>). -
historical-forms -
Вмикає відображення історичних форм (функція OpenType:
автор: Svitlanahist). -
styleset(<feature-value-name> #) -
Дозволяє відображати стилістичні набори (специфікація шрифту, функція OpenType: ss
автор: Svitlana<function-index>OpenType в даний час визначає ss01 через ss20). -
character-variant(<feature-value-name> #) -
Дозволяє відображати певні варіанти символів (специфікація шрифтів, функція OpenType: cv
автор: Svitlana<feature-index>OpenType в даний час визначає cv01 через cv99). -
swash(<feature-value-name>) -
Дозволяє відображати гліфи swash (специфікація шрифту, функція OpenType: swsh
автор: Svitlana<feature-index>, cswh). -
ornaments(<feature-value-name>) -
Дозволяє замінити гліфи за замовчуванням з орнаментами, якщо вони представлені в шрифті (специфікація шрифту, функція OpenType: ornm
автор: Svitlana<function-index>). -
annotation(<feature-value-name>) -
Дозволяє відображати альтернативні форми анотацій (специфічна для шрифтів, функція OpenType: nalt
автор: Svitlana<feature-index>).
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.fontVariantAlternatives = ' '; |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 111 | 34 | 9.1 | 97 | 111 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 111 | 111 | 34 | 9.3 |
Приклади
+ запропонувати свій приклад у пісочниці
swash() вмикає декоративні розчерки, оголошені в @font-feature-values. Потрібен шрифт із такими гліфами (наприклад, декоративні гарнітури) — системні шрифти зазвичай без них, тож рядки можуть збігатися.
HTML
<p>Звичайне накреслення: Quality Rare gift</p>
<p class="swash">Зі swash(fancy): Quality Rare gift</p>CSS
@font-feature-values "Custom Font" {
@swash {
fancy: 1;
}
}
p {
font-family: "Custom Font", serif;
}
.swash {
font-variant-alternates: swash(fancy);
}Щоб різницю було видно на будь-якій машині, у приклад вбудовано крихітний навчальний шрифт: у ньому літера «a» намальована квадратом, а сім її альтернатив — трикутником, колом, ромбом, хрестиком, порожнім квадратом, вузькою планкою й «метеликом». Кожен рядок вмикає своє значення font-variant-alternates — і гліф міняється. Останні два рядки показують пастки: невизначене ім'я не робить нічого, а скорочення font, написане нижче, стирає властивість зовсім.
HTML
<table class="demo">
<tr><th>без нічого (normal)</th><td class="s0">a a a a</td></tr>
<tr><th>stylistic(tri)</th><td class="s1">a a a a</td></tr>
<tr><th>styleset(circ)</th><td class="s2">a a a a</td></tr>
<tr><th>swash(dia)</th><td class="s3">a a a a</td></tr>
<tr><th>ornaments(plus)</th><td class="s4">a a a a</td></tr>
<tr><th>annotation(ring)</th><td class="s5">a a a a</td></tr>
<tr><th>character-variant(bar)</th><td class="s6">a a a a</td></tr>
<tr><th>historical-forms</th><td class="s7">a a a a</td></tr>
<tr class="warn"><th>styleset(немаєтакого)</th><td class="s8">a a a a</td></tr>
<tr class="warn"><th>stylistic(tri), а нижче font:</th><td class="s9">a a a a</td></tr>
</table>
<p class="note">Два останні рядки мусять збігтися з першим — і в цьому вся пастка.</p>CSS
@font-face {
font-family: "AltDemo";
src: url("data:font/ttf;base64,AAEAAAALAIAAAwAwR1NVQtOAVSIAAAC8AAABHE9TLzJlEU3dAAAB2AAAAGBjbWFwALwAGwAAAjgAAAA0Z2x5Zgghl3AAAAJsAAABeGhlYWRh0kOiAAAD5AAAADZoaGVhBd4B/wAABBwAAAAkaG10eBncA+gAAARAAAAAKGxvY2EAAAfMAAAEaAAAACxtYXhwAA8AEgAABJQAAAAgbmFtZQpKHsgAAAS0AAAAqHBvc3T/nwAyAAAFXAAAACAAAQAAAAoAKgCAAAFERkxUAAgABAAAAAD//wAHAAAAAQACAAMABAAFAAYAB3NhbHQALHNzMDEAMnN3c2gAOG9ybm0APm5hbHQARGN2MDEASmhpc3QAUAAAAAEAAAAAAAEAAQAAAAEAAgAAAAEAAwAAAAEABAAAAAEABQAAAAEABgAHABAAJAA4AEwAYAB0AIgAAQAAAAEACAABAAYAAQABAAEAAQABAAAAAQAIAAEABgACAAEAAQABAAEAAAABAAgAAQAGAAMAAQABAAEAAQAAAAEACAABAAYABAABAAEAAQABAAAAAQAIAAEABgAFAAEAAQABAAEAAAABAAgAAQAGAAYAAQABAAEAAQAAAAEACAABAAYABwABAAEAAQAEAlgBkAAFAAACigK8AAAAAAKKArwAAAHgADIA+gAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAABBTFREAEAAIABhAyD/OAAAAyAAyAAAAAEAAAAAAfQCvAAAACAAAQAAAAEAAwABAAAADAAEACgAAAAGAAQAAQACACAAYf//AAAAIABh////6f+gAAEAAAAAAAAAAQBkAAACWAH0AAMAAAEBAQEAZAH0AAD+DAAAAAAB9AAAAAAAAQBkAAACWAH0AAIAAAEBAQBkAfT/BgAAAAAB9AAAAAABAGQAAAJYAfQABwAAAQEBAQEBAQECWP+2/1D/T/+3AEkAsACxAPoAsABK/7b/UP9P/7cASQAAAAEAZAAAAlgB9AADAAABAQEBAV4A+v8G/wYAAAD6APr/BgAAAAEAZAAAAlgB9AALAAABAQEBAQEBAQEBAQEBGACMAAAAtAAA/0wAAP90AAD/TAAAALQAAAAAALQAAACMAAAAtAAA/0wAAP90AAAAAAACAGQAAAJYAfQAAwAHAAABAQEBAQEBAQBkAfQAAP4MAGQAAAEsAAAAAAAAAfQAAP5wASwAAP7UAAEAZAAAASwB9AADAAABAQEBAGQAyAAA/zgAAAAAAfQAAAAAAAIAZAAAAlgB9AACAAUAAAEBAQEBAQBkAfT/Bv8GAPoA+gH0AAD/Bv8GAPr/BgAAAAEAAAABAAAAAAAAXw889QADA+gAAAAAAAAAAAAAAAAAAAAAAAAAAAK8ArwAAAAIAAIAAQAAAAAAAQAAAyD/OAAAArwAAAAAArwAAQAAAAAAAAAAAAAAAAAAAAoCvABkArwAZAK8AGQCvABkArwAZAK8AGQCvABkArwAZAK8AGQBQABkAAAAAAAAAAAAAAAkAAAARAAAAHwAAACgAAAA7AAAASQAAAFIAAABeAAAAXgAAQAAAAoAEAAEAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAUAQgADAAEECQABAA4AAAADAAEECQACAA4ADgADAAEECQADAB4AHAADAAEECQAEAA4AOgADAAEECQAGAB4ASABBAGwAdABEAGUAbQBvAFIAZQBnAHUAbABhAHIAQQBsAHQARABlAG0AbwAtAFIAZQBnAHUAbABhAHIAQQBsAHQARABlAG0AbwBBAGwAdABEAGUAbQBvAC0AUgBlAGcAdQBsAGEAcgADAAAAAAAA/5wAMgAAAAAAAAAAAAAAAAAAAAAAAAAA") format("truetype");
}
@font-feature-values "AltDemo" {
@stylistic { tri: 1; }
@styleset { circ: 1; }
@swash { dia: 1; }
@ornaments { plus: 1; }
@annotation { ring: 1; }
@character-variant { bar: 1; }
}
.demo {
border-collapse: collapse;
}
.demo th {
padding: 6px 16px 6px 0;
text-align: left;
white-space: nowrap;
font: 600 .85em/1.4 system-ui, sans-serif;
color: #5a6472;
}
.demo td {
padding: 4px 0;
font-family: "AltDemo";
font-size: 30px;
line-height: 1.3;
color: #2f6fd0;
}
.demo .warn th {
color: #c0392b;
}
.s1 { font-variant-alternates: stylistic(tri); }
.s2 { font-variant-alternates: styleset(circ); }
.s3 { font-variant-alternates: swash(dia); }
.s4 { font-variant-alternates: ornaments(plus); }
.s5 { font-variant-alternates: annotation(ring); }
.s6 { font-variant-alternates: character-variant(bar); }
.s7 { font-variant-alternates: historical-forms; }
.s8 { font-variant-alternates: styleset(nemaetakogo); }
.demo .s9 {
font-variant-alternates: stylistic(tri);
font: 30px/1.3 "AltDemo";
}
.note {
margin: 14px 0 0;
max-width: 620px;
font: .85em/1.5 system-ui, sans-serif;
color: #5a6472;
}Коментарі
Коментарів ще немає — будьте першим!