Как вы сдвигаете линию спуска?

Question

Я пытаюсь выяснить, как сместить линию спуска для блока текста, чтобы переместить все спусковые устройства в буквы, такие как «y» и «g», чтобы они отображались выше базовой линии, но на самом деле это не смещениебазовая линия.Есть ли способ сделать это без использования специального шрифта?

Answer 1

Я тоже не эксперт по типографике, как предполагает @BoltClock, это, вероятно, невозможно каким-либо общим способом, кроме как в итоге через font-feature-settings. CSS не предлагает этот уровень контроля над типографикой.

Единственный (ужасный) обходной путь, который мне приходит в голову, - это смещение каждого символа в отдельности, используя position: relative - это может быть приемлемо для заголовка, но, вероятно, не в каком-либо другом контексте.

Если я вас правильно понимаю, это будет выглядеть так:

 span { font-size: 40px  }
 span.g  { position: relative; top: -6px; }
 span.y  { position: relative; top: -4px; }

 <span>Lorem <span class="y">y</span>psum Dolor Sit 
 <span class="g">g</span>amet</span>

JSFiddle

Можно было бы даже приготовить jQuery, чтобы сделать это автоматически.

Answer 2

Вам нужно будет использовать стиль vertical-align с процентным значением и встроенную обертку вокруг этих определенных символов, чтобы поднять их относительно других. Я думаю, что это был бы лучший клудж. Это немного более семантически, чем использование относительной высоты. Полагаю, вы тоже можете попробовать super, если у вас нет причудливых, нерегулярных спусков.

Answer 3

Я не типографский адепт, но я не думаю, что вы можете управлять базовой линией, линией спуска и положением букв в спусках, используя только CSS.

Если некоторые форматы шрифтов (и некоторые шрифты) поддерживают такую ​​вещь, может быть шанс, что предстоящее свойство font-feature-settings может позволить изменить это.