Можно ли изменить высоту текста, а не только высоту строки?

Мне интересно, можно ли изменить высоту встроенного текста, не растягивая шрифт и не меняя высоты строки в css.

Проблема возникает, когда у меня есть многострочные ссылки с эффектом зависания: когда мышь над линиями, эффект мерцает вкл. и выкл. из-за увеличенной высоты строки: Пример

Есть ли другой способ сделать это?

Ответы

Ответ 1

Вы не сможете изменить высоту шрифта в одиночку, но вы можете настроить font-size для работы с линией высота, которую вы установили.

Ответ 2

Вы можете увеличить высоту шрифта, используя css

transform:scale(2,3); /* W3C */
-webkit-transform:scale(2,3); /* Safari and Chrome */
-moz-transform:scale(2,3); /* Firefox */
-ms-transform:scale(2,3); /* IE 9 */
-o-transform:scale(2,3); /* Opera */

JSFIDDLE

Ответ 3

Вы также можете попробовать уменьшить letter-spacing. Придание типу немного более жесткому, чтобы он казался более высоким по отношению к его ширине.

Ответ 5

Вы можете увеличить высоту, ширину текста, используя свойство transform. Например: transform: scale (0.7, 1.0);

  • Первое значение внутри свойства шкалы изменяет ширину буквы/текста.
  • И второе значение изменяет высота буквы/текста.

 **h1 {
    font-size: 60px;
    transform: scale(0.7, 1.0);
    margin-left: -90px 
}**

Ответ 6

Вы не можете изменить высоту шрифта с помощью CSS, но то, что вы можете сделать, это сделать его более высоким на

  • сокращение letter-spacing ( Примечание: вы можете использовать отрицательный letter-spacing, если вам нужно.)
  • сокращение font-weight
  • и увеличивая font-size

Ответ 7

Существует одно свойство, которое еще не упоминалось, что может помочь изменить высоту шрифта... единственная проблема заключается в том, что он имеет безудержную поддержку.

Я имею в виду свойство font-size-adjust CSS.

MDN имеет это, чтобы сказать:

Свойство CSS font-size-adjust указывает, что размер шрифта должен выбираться в зависимости от высоты строчных букв, а не от высоты заглавных букв. Это полезно, поскольку разборчивость шрифтов, особенно при небольших размерах, определяется больше размером строчных букв, чем размером заглавных букв.

Как я упоминал поддержка ужасна. Начиная с этого поста, Firefox является единственным браузером, который его поддерживает. Начиная с версии 43 Chrome, он может быть включен под флагом экспериментальной веб-платформы.

Ответ 8

Вы можете увеличить высоту с помощью transform: scale (3,5) Высота зависит от второго параметра преобразования: масштаб

<div>
<span>Text</span>  
</div>

div {
text-align:center;
 }

span
{    
display:inline-block;
transform:scale(3,5); 
-webkit-transform:scale(3,1); 
}

http://codepen.io/smarty_tech/pen/ZWvWav