font-variant-position

Свойство font-variant-position управляет альтернативными глифами надстрочных и подстрочных символов. При этом оно влияет только на положение и размер самих символов, а базовая линия текста не меняется.

        
          
          .selector {  font-variant-position: super;}
          .selector {
  font-variant-position: super;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Возможные значения:

• normal — отключает альтернативное начертание (значение по умолчанию);
• sub — включает подстрочные символы, например для химических формул (H₂O);
• super — включает надстрочные символы, например для степеней (x²).

Вот как выглядят эти значения на примере:

Свойство помогает корректно отображать символы в математических, химических формулах, в сносках, примечаниях и не только. Лучше всего его использовать в связке с HTML-тегами <sup> и <sub>: теги будут отвечать за семантику, а font-variant-position делать отображение аккуратным и типографически правильным (как это задумал дизайнер шрифта).

💡 Свойство пока поддерживается не во всех браузерах и работает только со шрифтами, в которых заложены OpenType. Если шрифт их не поддерживает, свойство не сработает.

💡 Того же поведения можно добиться с помощью font-feature-settings: "sups" 1; и "subs" 1;, однако в будущем лучше использовать именно font-variant-position для более предсказуемого и точного управления. Пока свойство реализовано не везде, можно добавить @supports:

        
          
          /* Фолбэк */.font-super {  font-feature-settings: "sups" 1;}.font-sub {  font-feature-settings: "subs" 1;}/* Используем font-variant-position, если он поддерживается */@supports (font-variant-position: super) {  .font-super {    font-variant-position: super;  }}@supports (font-variant-position: sub) {  .font-sub {    font-variant-position: sub;  }}
          /* Фолбэк */
.font-super {
  font-feature-settings: "sups" 1;
}

.font-sub {
  font-feature-settings: "subs" 1;
}

/* Используем font-variant-position, если он поддерживается */
@supports (font-variant-position: super) {
  .font-super {
    font-variant-position: super;
  }
}

@supports (font-variant-position: sub) {
  .font-sub {
    font-variant-position: sub;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать